IE6 HTML 控件包装

Question

有什么方法可以防止 IE6 中控件之间的换行吗？例如，我有一个标签和一个选择框。选择框宽度是动态的（取决于内容）。我希望标签始终位于选择框的左侧。现在我遇到的问题是选择框落在标签下方。我尝试过使用 标签以及 CSS 自动换行规则，但因为这不是文本，所以换行规则不适用。我发现确保其工作的唯一方法是将它们放在两列表中，但我不喜欢这个解决方案。还有其他办法吗？

Answer 1

如果标签和输入都有内联显示（“display: inline;”）并且输入换行，则父容器可能太窄。话虽如此，典型的水平标签表单布局并不依赖于这种内联显示，它们采用了一种利用块级浮动元素的更受控制的方法。例如，给定以下 HTML：

<div class="field">
    <label for="fieldId">field label</label> 
    <input id="fieldId" name="field" />
</div>

您可以使用以下 CSS 设置标签的位置：

.field {
    overflow: hidden; /* clear float */
}
.field label {
    display: block;
    float: left;
    margin: 0 5px 0 0;
}

有一个 具体细节有很多变化，但上面传达了基本概念。