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

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

您可能需要为两列设置固定高度