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

我需要一个网页与此：如何在CSS/HTML中定义任意内容的矩形框？

+-------+-------------------+ 
| 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选项会更强大？

来源

2012-01-09 fernacolo

为什么不直接使用.label {浮动：左;宽度：300px; }？它适用于所有浏览器。显示：表格在ie6或ie7中不起作用 – 2012-01-09 18:23:47

@Shadow_boi它不起作用。文本在标签下，如第二张图片所示。 – fernacolo 2012-01-09 18:27:36

试试这个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; }

您可能需要有一个固定的高度为两列

来源

2012-01-09 18:23:01

这可行，但我不喜欢依靠添加两个内部宽度来制作外部宽度。如果我需要将.outer从400px更改为另一个值，则必须记住更改300px。 – fernacolo 2012-01-09 18:30:20

这是一个相当干净和简单的解决方案，你宁愿改变什么？ – 2012-01-09 18:31:43

我之前的评论并不清楚。我编辑过。 – fernacolo 2012-01-09 18:33:03

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

回答

相关问题