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 - 造型形式

回答

相關問題