我需要一个网页:
+-------+-------------------+
| 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
选项会更健壮?
最佳答案
试试这个 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; }
您可能需要为两列设置固定高度
关于html - 如何在 CSS/HTML 中为任意内容定义一个矩形框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8793175/