CSS - 造型形式

我造型形式的网站，我需要它看起来就像这样 - CSS - 造型形式

我的编码版本，到目前为止，看起来是这样的 -

的名称&电子邮件部分由于某种原因不能正确调整大小，似乎有填充或保证金属性的地方，我似乎无法覆盖。这里是我的代码，因为它代表 -

form { 
 
    height: 200px; 
 
    width: 400px; 
 
    margin-right: 50px; 
 
} 
 

 
.name { 
 
    float: left; 
 
} 
 

 
input[type=text], 
 
input[type=email] { 
 
    background: #F0F0F0; 
 
    font-size: 10px; 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 

 
input[type=subject] { 
 
    background: #F0F0F0; 
 
    font-size: 10px; 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 

 
textarea { 
 
    resize: vertical; 
 
    font-size: 10px; 
 
    width: 100%; 
 
    background: #F0F0F0; 
 
    height: 100px; 
 
} 
 

 
input[type=submit] { 
 
    background: #00bfff; 
 
    border: none; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
    width: 100%; 
 
}

<div class="six columns"> 
 
    <form> 
 
    <fieldset> 
 
     <div class="name"> 
 
     <input type="text" required placeholder="NAME"> 
 
     </div> 
 
     <div class="name"> 
 
     <input type="email" required placeholder="EMAIL"> 
 
     </div> 
 
     <div> 
 
     <input type="subject" placeholder="SUBJECT"> 
 
     </div> 
 
     <div> 
 
     <textarea placeholder="MESSAGE..."></textarea> 
 
     </div> 
 
    </fieldset> 
 
    <input type="submit" value="SUBMIT"> 
 
    </form> 
 
</div>

更新 - 最新版本。

来源

2017-06-28 Mike.Whitehead

如果你试试这个，会发生什么：给你的电子邮件的div一类的 “电子邮件”，并在你的CSS：'.email {浮动：左; margin-left：10px！important; }' – Arman

@Arman它使它成为一个很长的部分，但是当我尝试应用任何宽度规则使其与名称部分对齐时，什么都不会发生。 –

这似乎适用于我：[https://jsfiddle.net/xw2keum0/1/](https://jsfiddle.net/xw2keum0/1/） – Arman

我做了一堆调整和最后一首曲子，因为我去了，所以我希望你能够通读这一点，并弄清楚。如果没有，请随时提问！

form { 
 
    height: 200px; 
 
    width: 400px; 
 
    margin-right: 50px; 
 
} 
 

 
fieldset { 
 
    border: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
} 
 

 
div.row { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
div.row input { 
 
    margin-left: 5px; 
 
} 
 
div.row input:first-child { 
 
    margin-left: 0; 
 
} 
 

 
input[type=text], 
 
input[type=email] { 
 
    background: #E8E8E8; 
 
    font-size: 10px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border: 0; 
 
    padding: 0; 
 
    margin-bottom: 5px; 
 
    padding: 6px 12px; 
 
} 
 

 
textarea { 
 
    resize: none; 
 
    font-size: 10px; 
 
    background: #E8E8E8; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border: 0; 
 
    padding: 6px 12px; 
 
    margin-bottom: 5px; 
 
} 
 

 
input[type=submit] { 
 
    background: #1ba4dd; 
 
    border: none; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
    width: 100%; 
 
    padding: 8px 0; 
 
} 
 

 
input[type=submit]:hover { 
 
    background: #00bfff; 
 
}

<div class="six columns"> 
 
    <form> 
 
    <fieldset> 
 
     <div class="row"> 
 
     <input name="name" type="text" required placeholder="NAME"> 
 
     <input name="email" type="email" required placeholder="EMAIL"> 
 
     </div> 
 
     <input name="subject" type="text" placeholder="SUBJECT"> 
 
     <textarea rows="8" placeholder="MESSAGE..."></textarea> 
 
    </fieldset> 
 
    <input type="submit" value="SUBMIT"> 
 
    </form> 
 
</div>

来源

2017-06-28 18:55:03 smarx

我有一个.row规则的高度（250像素）和边距-top（20px），我怎样才能覆盖这个表单，因为它留下了名称/电子邮件字段和表单其余部分之间的巨大差距？ –

否则这看起来非常棒 - 谢谢。 –

你的意思是你已经有一个名为'row'的类？只需选择一个不同的类名，或者制定一个更具体的规则（比如'form＃thisparticularform div.row'）。 – smarx

CSS - 造型形式

回答

相关问题