Question

我正在尝试实现一个非常简单的HTML布局。它是这样的：

A Label:         [Input                ]
Another Label:   [Input                ]
The Last Label:  [Input                ]

过去，我会继续使用表格。否则，让输入控件正确排列会很痛苦。

有人能建议一种简单可靠的方法来实现这种布局而不使用表吗？

感谢。

Answer 1

您可以使用display: inline-block

<style type="text/css">
  label { display: inline-block; width: 200px; }
  ul { list-style: none; }
</style>

<ul>
  <li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
  <li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
  <li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>

但是，为了使其垂直对齐，您必须将标签输入对包装在另一个标记（例如<li>或<div>）中，或者在输入后放置换行符。< / p>

Answer 2

<style>
  label { width: 200px; float:left; clear:left; } 
  input { float:left;} 
</style>
<form>
  <label for="fullname">Full Name:</label>
  <input type="text" name="fullname" id="fullname">
  <label for="email">Email Address:</label>
  <input type="text" name="email" id="email">
</form>

额外的好处是，如果水平空间不足，输入将包裹在标签下方。

http://jsbin.com/anuziq（缩小浏览器窗口范围）

如果你实际上不想让它们环绕，我建议采用这种方法：

<style>
   label { white-space: nowrap; } 
   span { width: 200px; display: inline-block; }
</style>
<form>
  <label>
      <span>Full Name:</span>
      <input type="text" name="fullname">
  </label>
  <label>
      <span>Email Address:</span>
      <input type="text" name="email">
  </label>
</form>

根据我的经验，构建HTML通常允许您可以想到的任何布局。希望输入始终低于标签？在display:block元素上使用span。想要input右侧的文字吗？只需在float:right上使用span。

这里的好处是，您不需要for和id属性来将标签与输入连接起来。如果您不能将标签放在输入旁边，就像在2个单独的表格单元格中那样，它们才是真正必要的。

没有表格的布局表单字段

2 个答案: