Question

我使用带有table，table-row和table-cell值的CSS display property来以表格的形式布置文档。

通常（如您在代码中所见），表格中单元格的大小与包含的内容相关（直到我们提供硬编码的维度值。

但我希望第二个table-cell中的table-row和table-cell的宽度与第一个table-row中相应的table-cell的宽度相同。因此，第二行中第一个table-cell的宽度与第一个table-row中第一个pixel的宽度相同。有可能吗？

我希望这样做，而无需在第二个及后续margin中添加padding table-row或width等属性。我只是想让它得到它上方单元格的<div style="display:table;"> <div style="background-color:#d9a4f4; display:table-row;"> <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label> <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label> </div> <div style="background-color:#7cbfdd; display:table-row;"> <input type="radio" name="radio_group1" value="0" style="display:table-cell;"> <input type="radio" name="radio_group1" value="0" style="display:table-cell;"> <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. </label> </div> <div style="background-color:#e8c277; display:table-row;"> <input type="radio" name="radio_group2" value="0" style="display:table-cell;"> <input type="radio" name="radio_group2" value="1" style="display:table-cell;"> <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. </label> </div> </div>。

所以最后，列的宽度将等于列中最宽的单元格的宽度。

我该怎么做？

Here is the fiddle. 在代码中，这三行有不同的颜色。

CODE：

{{1}}

Answer 1

所有DIV，label和input元素都是完全独立的，即使它们设置为display: table-cell，它们也没有内部关系，也没有关于彼此的尺寸。

您必须明确定义其宽度以使其宽度匹配。（那么你基本上不再需要display - 属性了。）

这是一个 jsfiddle演示，修改了您的代码：

http://jsfiddle.net/erlingormar/ga1hzrLd/

这有一个建议，你可以使用一个修改过的结构来对齐你的元素，而不用在类似于表格的布局中考虑它们：

Answer 2

如果您向第一行添加一个单元格，然后将输入包装在一个范围中：

<div style="display:table;">
    <div style="background-color:#d9a4f4; display:table-row;">
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Inferrable</label>
        <label style="display:table-cell; padding-left:10px; padding-right:10px;">Not inferrable</label> 
        <span style="display:table-cell;"></span>
    </div>
    <div style="background-color:#7cbfdd; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group1" value="0" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons. I am the label for the first group of radio buttons.</label>
    </div>
    <div style="background-color:#e8c277; display:table-row;">
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="0" style="display:table-cell;"></span>
        <span style="display:table-cell; text-align:center;"><input type="radio" name="radio_group2" value="1" style="display:table-cell;"></span>
        <label style="display:table-cell;">I am the label for the second group of radio buttons. I am the label for the second group of radio buttons. I am the label for the second group of radio buttons.</label>
    </div>
</div>

你应该能够达到你想要的效果 - example

Titles on one line instead of wrapping

使第二个表行中的单元格宽度等于第一个表行中单元格的宽度？

2 个答案: