html - 具有两个并排内联 block 元素的类似表格的布局？

Question

我正在构建一个显示用户信息的网页。它看起来像这样:

如彩色图例所示，表单包含一个标签和一个有序列表。 CSS 已用于提供 display: inline 并使列表显示为以逗号分隔的组名列表。这是相关的 HTML 片段:

<label>Group membership</label>
<ol>
  <li>domain users</li>
  <li>denied rodc password replication group</li>
</ol>

问题

表单的整体宽度未知(它是流动的)。标签具有固定宽度以支持右对齐文本，但有序列表可以自由占用剩余的水平可用空间。

但是，当组列表变大时会发生这种情况:

列表需要比水平可用空间更多的空间，因此它向下移动并看起来与标签分离并且标签/显示元素对齐超出窗口。这看起来真的很糟糕。

我想要实现的目标

列表应根据需要向下扩展，但它应保持锚定在标签旁边(就像在基于表格的布局中发生的那样，其中两个单元格具有 vertical-align: top)。

是否有一种 CSS 技术可以轻松做到这一点？实现目标的最小侵入性方法是什么？整个应用程序中有大量以相同方式设置样式的表单，因此彻底更改 CSS 很容易影响其他表单，因此是不切实际的。

通过外科手术将列表的 HTML 定位是可能的，所以如果有帮助，请随时推荐替代方案。

Here is a fiddle包含所有相关样式的模型，您可以将其用作引用。

Answer 1

不使用 inline-block，而是将该特定标签向左浮动，并使列表 block 带有 margin-left –见http://jsfiddle.net/8tx24/1/

(我也制作了 LI inline，因为作为 inline-block 第二个 LI 中的 long 值可能会使其换行，看起来有点很奇怪。但如果你想要这种行为，你可以保留你的 inline-block。)