javascript - 如何对齐 CSS 和 HTML 中的垂直文本框？

Question

我是前端初学者(昨天开始)，我正在通过 FreeCodeCamp 学习。我正在尝试建立一个调查网站。我想将底部文本框的左侧与顶部左侧文本框的左侧对齐。我尝试更改 text-align 元素的属性，但它并不公平。如果这个问题已经被问到，我深表歉意。我无法将以前的答案与我的联系起来。

这是我的代码:

body {background-color: #98AFC7;}

#title{
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly{
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p{
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

.leftTab {
  display: inline-block;
  text-align: right;
  width: 48%;
  vertical-align: middle;
}

.eMailTab{
  display: inline;
  text-align: right;
  width: 48%;
}

.name-fields {
  height: 20px;
  width: 140px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.input-field {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="rowTab">
      <div class="leftTab">
        <input autofocus type="text" name="name" id="name" class="name-fields" placeholder="First name" required>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="name-fields" placeholder="Last Name" required>
      </div>
    </div>

      <div class="eMailTab">
        <input autofocus type="text" name="email" id="email" class="input-field" placeholder="e-Mail address" required>
      </div>
    </div>
</div>

   

这是我的 CodePen 链接，您可以看到我在说什么:

https://codepen.io/omaroz92/full/VBWbae/

Answer 1

您可以使用 flexbox轻松实现这一目标。我稍微更改了您的 HTML 和 CSS 以使其工作。

body {
  background-color: #98AFC7;
}

#title {
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly {
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p {
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.container {
  width: 75%;
  max-width: 600px;
  margin: 0 auto;
}

.row {
  display: flex;
}

input {
  flex: 1;
  height: 20px;
  min-width: 0;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="container">
    <div class="row">
      <input autofocus type="text" name="name" id="name" placeholder="First name" required>
      <input type="text" name="name" id="name" placeholder="Last Name" required>
    </div>
    <div class="row">
      <input type="text" name="email" id="email" placeholder="e-Mail address" required>
    </div>
  </div>
</div>