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>

Answer 2

通过使div display:inline，您可以有效地删除width属性。因此，文本元素实际上是正确对齐的，但是如果没有48％的宽度，文本框将保持原位。 https://codepen.io/anon/pen/pZOPPV。但是，这可能不是执行这些操作的最佳方法。尝试内联阻止：

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

要使电子邮件和名字框的左侧对齐，请调整电子邮件框的宽度。

如果您想查看width属性的实际规格，则此SO的答案是合适的：https://stackoverflow.com/a/22487952/462006

如何在CSS和HTML中对齐垂直文本框？

2 个答案: