Question

我有一个带有标签容器和值容器的表单在一行中，我做了一个小提琴来说明： http://jsfiddle.net/eEvEN/3/

布局是固定的，我从不希望值容器包装在标签容器下。由于两个容器都设置为inline-block，我可以white-space:nowrap到列表行（请参阅小提琴），目标部分完成。部分地，因为在值容器中，如果浏览器的宽度不足以将文本保存在一行中，我确实希望文本换行。所以我认为我可以white-space:normal到价值容器，但它不起作用......它以nowrap方式重新启动。

如何才能使这项工作正常？

Answer 1

我使用CSS表格显示（即表格行和表格单元格）解决了这个问题。但是这个解决方案将misbehave in older IE versions。

li {
    display: table-row;
}
.field_label {
    display: table-cell;
    min-width: 140px;
    background: yellow;
}
.field_widget {
    display: table-cell;
    background: cyan;
}

使用CSS表http://jsfiddle.net/ECssv/

的解决方案

使用HTML表http://jsfiddle.net/VrHMm/的解决方案应该适用于较旧的IE

液晶表格布局与显示：内联块

1 个答案: