表格式布局与两个内联块元素并排？

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作为inline-block，第二个LI中的long值可能会让它突破到一个新行，看起来有点奇怪。但如果你想要那个行为，你可以保留{{1}}。）