CSS - 为表单设置样式

Question

我为网站设计了一个表单，我需要它看起来像这样 -

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

名称＆amp;电子邮件部分由于某种原因不能正确地调整大小，似乎有一些填充或边距属性，我似乎无法覆盖。这是我现在的代码 -

＆＃13;

＆＃13;

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

＆＃13;

df = data.frame(date_time = seq(as.POSIXct("2017-05-29 08:15:00 UTC"), 
                                as.POSIXct("2017-05-30 08:15:00 UTC"), by = "5 min"),
                group = "temp")

＆＃13;

＆＃13;

＆＃13;

更新 - 最新版本。

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;