Question

对齐以下内容的最佳方法是什么？

我想要左边的.inputTitle和右边的inputInput，两者之间都有错误。

CSS：

.crud_form{
    width:430px;
    margin:10px solid;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle{
    float:left;
    clear:left;
    margin:11px 10px 10px 0;
    width:95px;
    background:green;
}
.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}

HTML：

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
<span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name"  /></span><span class="inputError"></span>

<span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>

<span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>

<span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
<option value="Caps cost $15"></option>
<option value="Mugs cost $20"></option>
<option value="Childrens T-shirts, sizes 0 to 6">$10</option>
<option value="Ladies (no photo) cost $20"></option>
<option value="Men cost $20"></option>
</select></span>

<span class="inputError"></span>
<span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>

<input type="submit" value="Save" />

</form>

Answer 1

我不知道为什么每个人都在使用div，span和li等。这很简单，请看下面的示例：

label {
  width: 150px;
  padding-right: 20px;
  display: inline-block;
}

<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>
<p>
  <label for="IDofInput">text goes here</label>
  <input type="text" id="IDofInput">
</p>

Answer 2

我想要左边的.inputTitle和右边的inputInput 两者之间的错误。

我一直这样做的方法是为它们设置宽度。

例如：

如果您有3个浮动元素，并且您希望它们在“容器”本身内完美对齐，则Container当然需要设置宽度。

在设置Container的宽度后，将这3个浮动元素的宽度设置为等于Container的宽度。

见下文：

<强> HTML：

<div class="container">
     <div class="inputTitle"></div>
     <div class="inputError"></div>
     <div class="inputInput"></div>
     <div class="clear"></div>
</div>

<强> CSS

.container {
   width: 600px;
}
.inputTitle {
   width: 200px;
   float: left;
}
.inputError {
   width: 200px;
   float: left;
}
.inputInput {
   width: 200px;
   float: left;
}
.clear {
   clear: both;
}

最终你可以加上明确的：两者;关于集装箱的CSS声明，但我想说清楚：两者;上课只是为了安全起见。

当然，您可以随时使用标签，但通过CSS为标签设置预定义的宽度将适用于类和/或ID中的所有标签。

我希望有所帮助！谢谢！亚伦

Answer 3

要清理垂直对齐方式，可以将每个标签 - 输入对包装在包含div中，然后将输入浮动到右侧。我不确定根据你的问题，如果这是你正在寻找的对齐方式，但它确实有更好的外观。

HTML：

<form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data">
  <div class="formdiv">
<span class="inputTitle">First Name</span>
<span class="inputInput">
  <input type="text" name="first_name" value="" id="first_name"  />
</span>
<span class="inputError"></span>
  </div>

  <div class="formdiv">
<span class="inputTitle">Last Name</span>
<span class="inputInput">
  <input type="text" name="last_name" value="" id="last_name"  /></span>
<span class="inputError"></span>
  </div>

  <div class="formdiv">
<span class="inputTitle">Address</span>
<span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span>
  </div>

  <div class="formdiv">
  <span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone"  /></span><span class="inputError"></span>
  </div>

  <div class="formdiv">
  <span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item">
  <option value="Caps cost $15"></option>
  <option value="Mugs cost $20"></option>
  <option value="Childrens T-shirts, sizes 0 to 6">$10</option>
  <option value="Ladies (no photo) cost $20"></option>
  <option value="Men cost $20"></option>
  </select></span>

  <span class="inputError"></span>
  </div>

  <div class="formdiv">
  <span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span>
  </div>

  <input type="submit" value="Save" />

</form>

CSS：

.formdiv {
    float: left;
    width: 100%;
    margin-bottom: 1em;
}

.crud_form{
    width:430px;
    margin:10px solid;
    padding: 10px;
    font-family:Verdana, Geneva, sans-serif;
    background:orange;
}
.inputTitle {
    float:left;
    clear:left;
/*    margin:11px 10px 10px 0; */
    width:95px;
    background:green;
}

.inputInput {
    float: right;
}

.inputRequired{
    float:left;
    margin:5px;
    width:113px;
    background:blue;
}
.inputError{
    float:left;
    margin:10px;
    background:red;
}

.crud_form select textarea{
    float:left;
    clear:both;
}

Answer 4

构建双列表单的最佳方法是在table元素中使用两列form元素。但正如你所说，你想要输入标签（标题）和输入字段之间的“错误”（显然，错误指示或错误信息），你实际上想要一个三列形式，即三列表

<form ...>
<table>
<tbody>
  <tr><td class="inputTitle"><label for="first_name">First Name</label></td>
      <td class="inputError"><span></span></td>
      <td class="inputInput"><input type="text" name="first_name" id="first_name"  /></td></tr>
</tbody>
</table>
</form>

这（除了使用CSS表功能模拟它，它具有有限的浏览器支持）是根据内容的宽度要求使浏览器为列分配宽度的唯一方法，而不是你对什么做出疯狂的猜测可能需要。

Answer 5

摘要

恕我直言（W3C支持我），列表语义最好描述表单布局 - 表单作为提示数据列表。在此演示文稿中，正在使用网格来布局表单控件。

参考

要全面了解它是如何完成的，请参阅最初在Opera开发人员社区发布的W3C's reference on this的Web标准课程。

代码示例/实现

HTML：

<form>
  <ul>
    <li><label for="realname">Name:</label><input type="text" name="name" value="" class="medium" id="realname" /></li>
    <li><label for="address">Email:</label><input type="text" name="email" value="" class="medium" id="address" /></li>
    <li><label for="messageBody">Comments:</label><textarea name="comments" cols="32" rows="8" class="long" id="messageBody"></textarea></li>
  </ul>
</form>

CSS：

/* base font size, other measures relay on seventh parts of this */
body {
    font-size: 14px;
    line-height: 1.714em;
}

/* form styles */
form {
    margin: 0;
    width: 35.929em;
}

/* reset list styles to be used as form layout mechanism */
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    clear: both;
    height: 1.714em;
    margin: 0;
}

/* form controls styles */
fieldset {
    height: 1.429em;
    margin: 0 0 -.143em 0;
    border: 0;
}
label {
    display: block;
    float: left;
    clear: left;
    width: 10.286em;
    overflow: auto;
    padding-right: 1.714em;
    text-align: right;
}
input {
    height: 1.143em;
    border: .071em solid rgb(96,96,96);
    padding: .071em;
    line-height: .929em;
}
textarea {
    height: 4.714em;
    margin-bottom: .286em;
    border: .071em solid rgb(96,96,96);
    padding: 0;
}
input,
textarea {    
    margin-top: 0;
    font-size: 100%;
    display: block;
    float: left;
    overflow: hidden;
    font-family: Futura,'Century Gothic',sans-serif;
    font-size: 1em;
}

/* input and textarea variants */
.medium {
    width: 11.714em;
}
.long {
    width: 20.429em;
}

你可以使用this jsFiddle中的完整代码示例（这不包含IE样式表）。

<强>更新

我编写了答案，仅包含两列布局表单的相关代码。请参阅上面的链接以获得完整的工作示例。

构建两列html表单的最佳方法是什么？

5 个答案:

摘要

参考

代码示例/实现

HTML：

CSS：