Question

有关制作此类表格的最佳方式的任何建议吗？ http://i.imgur.com/vT7tC.png

我正在使用表格+输入宽度：100％，我知道这可能不是最好的方法（另外，由于某种原因，输入宽度：100％变得大于[td]或[div]（此图像上的红色边框来自[div] [输入...] [/ div]）

感谢

Answer 1

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

您需要指定一个宽度，否则您的列之间会有较大的间隙，而您的中间列不会与您的右侧输入对齐。

这是我编写该表单的方式：

HTML

<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;}

Answer 2

不要浪费时间手工制作柱子。

只需使用Blueprint CSS Framework即可。它非常好用且易于使用，并以您想要的方式完成工作。

最重要的是，您不再需要关心浏览器兼容性了。

使用CSS作为多列表单

2 个答案: