Question

我需要一个网页：

+-------+-------------------+
| label | [] a checkbox     |
+-------+ with a big text.  |
        +-------------------+

我有这个HTML：

<div class="outer">
    <label>label</label>
    <div class="box">
        <input type="checkbox"> a checkbox with a big text
    </div>
</div>

这个CSS：

.outer { clear: both; width: 400px; }
label { float: left; width: 100px; }
.box { dislay: table; /* also works with table-cell */ }

请注意，我正在使用display: table来避免这种情况：

+-------+-------------------+
| label | [] a checkbox     |
+-------+                   |
| with a big text           |
+---------------------------+

box div不会有任何表格行或单元格 - 只是一些流内容（复选框和一些文本，暂时）。

我的问题：使用display: table是否足够，或者即使没有外部display: table-cell元素，我也应该使用display: table？假设将来有人选择将所有这些放在table元素或display: table元素中？哪个display选项会更强大？

Answer 1

试试这个HTML：

<div class="outer">
    <div class="left-col">
        <label>label</label>
    </div>
    <div class="right-col">
        <input type="checkbox"> a checkbox with a big text
    </div>
</div>

使用这个CSS：

.outer { clear: both; width: 400px; }
.left-col { float: left; width: 100px; }
.right-col{ float: left; width: 300px; }

两列可能需要固定高度

如何在CSS / HTML中为任意内容定义矩形框？

1 个答案: