css - 带显示的液体表单布局：inline-block

Question

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

布局是固定的，我从不希望值容器包裹在标签容器下。由于两个容器都设置为inline-block我可以white-space:nowrap对列表行进行操作（参见小提琴）并且目标已部分完成。部分原因是因为在值容器中，如果浏览器不够宽以将文本保存在一行中，我确实希望文本换行。所以我想我可以white-space:normal对价值容器做些什么，但它不起作用……它仍然nowrap流行。

我该怎么做才能使这项工作正常进行？

Answer 1

我已经使用 CSS 表格显示（即table-row和table-cell）解决了它。但是这个解决方案在旧的 IE 版本中会出现问题。

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