使用CSS作为多列表单

Question

关于做这样的表格的最佳方法的任何建议？http://i.imgur.com/vT7tC.png

我正在使用表格+输入宽度:100%,我知道这可能不是最好的方式(也是因为某些原因输入宽度:100%比[td]或[div]大(此图像上的红色边框)来自[div] [输入...] [/ div])

谢谢

Answer 1

您可以将左侧标签/输入浮动到左侧，将右侧标签/输入浮动到右侧。

您需要指定宽度，否则您最终会在列之间出现很大的间隙，并且中间列将不会与大的右侧输入对齐。

这就是我对该表单进行编码的方式：

超文本标记语言

<div class="content">
    <div class="row">
        <div class="lrow">
              <label>aaa aaa</label>
              <input type="text" class="large">
        </div>
        <div class="rrow">
              <label>bbb</label>
              <input type="text" class="small">
        </div>
    </div>
    <div class="row">
        <div class="lrow">
              <label>ccc</label>
              <input type="text" class="small">
        </div>
        <div class="rrow">
              <label>ddd ddd</label>
              <input type="text" class="large">
        </div>
    </div>
    <div class="row">
        <div class="lrow">
              <label>eee</label>
              <input type="text" class="small">
        </div>
        <div class="rrow">
              <label>fff fff</label>
              <input type="text" class="small">
        </div>
        <div class="crow">
              <label>ggg</label>
              <input type="text" class="small">
        </div>
    </div>
</div>

CSS

.content {width:542px;}
.row {overflow:hidden;margin:5px 0;}
.row label {float:left;text-align:right;width:60px;margin-right:5px;}
.row input {float:left;}
.lrow {float:left;}
.rrow {float:right}
.large {width:300px;}
.small {width:100px;}