Question

我正在尝试使这些文本框以整齐的顺序对齐，以使它们看起来实际上不错，但是在浏览器查看时，它们分散在各处。以下是我的文本框声明：

iexplore

我觉得我需要做一些CSS魔术，但是我不确定我需要做什么。

Answer 1

我认为您的开端很好。 HTML中有一些错误，其中一些项目的结束标记有误。您要做的是稍微构造标记以给您一些控制。以这个标记为例：

<div class="field">
  <label for="isbn">Enter ISBN to update:</label> 
  <input type="text" id="isbn" name="isbn" placeholder="Enter ISBN...">
</div>

<div class="field">
  <label for="titleUpdate">Title</label>
  <input type="text" id="titleUpdate" name="titleUpdate" placeholder="Enter Updated Title...">
</div>

<div class="field">
  <label for="authorUpdate">Author</label>
  <input type="text" id="authorUpdate" name="authorUpdate" placeholder="Enter Updated Author...">
</div>

<div class="field">
  <label for="genreUpdate">Genre</label>
  <input type="text" id="genreUpdate" name="genreUpdate" placeholder="Enter Updated Genre...">
</div>

<div class="field">
  <label for="yearUpdate">Year Published</label>
  <input type="text" id="yearUpdate" name="yearUpdate" placeholder="Enter Updated Year...">
</div>

请注意我们如何将文本字段的文本包装为标签。我将标签和输入字段归为一组。有了HTML结构后，我们就可以调整它的外观。例如，将所有标签向左对齐，然后将框向右对齐将“以整齐的顺序对齐”。使用此CSS的一种方法：

.field {
  margin-bottom:10px;
  width:400px;
  clear:both;
}
label {float:left;}
input[type=text] {float:right; width:200px;}

以该编码笔为例-https://codepen.io/anon/pen/vwmRbv

如何将文本框彼此对齐？

1 个答案: