CSS - 私はサイトのフォームをスタイリングしていると私はそれがこのように見える必要があるフォーム

Question

スタイリング -

私のコード化されたバージョン、これまでのところ、このようになります -

何らかの理由で電子メールセクションの名前が&と正しく設定されず、オーバーライドできないようなパディングやマージンプロパティがあるようです。

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>

UPDATE - - 最新版を、そのままここに私のコードです。

Answer 1

私が行ったように一束の最後のトラックを作りましたので、これを読んで理解することを願っています。そうでない場合は、お気軽に質問してください！

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>