Question

我拼命地试图远离桌子，我真的是！但我正在努力寻找最简单的东西：灵活的LABEL + INPUT布局。考虑：

<div class="inputfield">
    <label for="inp">My Label:</label>
    <input id="inp"/>
</div>

我想设置这个样式，所以结构对于我的所有形式都是通用的，但是标签的宽度可以在CSS中设置，输入的宽度占据水平空间的其余部分。就像桌子一样！

.inputField
{
    position: relative;
    padding: 10px;
}
.inputField label
{
    display: inline-block;
    width: 70px;  /* Might change in other forms */
}
.inputField input
{
    display: inline-block;
    width: 100%; /* Really the 'rest' of the width to the right of the label */
}

这感觉就像一个固定流体的2柱问题。但是，如果没有两个列知道固定列的宽度，我找不到任何方法。更糟糕的是，对于盒子模型，我必须考虑输入标签的边框（我想远离CSS3的边框，因为IE7在我的雷达上）。

我也很高兴通过CSS移动标签/输入，而不会使用他们使用的各个表单 - 标签在顶部，右侧等等。

那么我如何设置一个'通用'标签+输入对，我可以在多种形式上使用，其中标签的宽度可能会改变，而不必在输入标签上粘贴特定于标签宽度的黑客？

Fluid LABEL + INPUT又称2柱固定+流体可能吗？

0 个答案: