html - 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>

更新 - 最新版本。

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>