如何使块元素的<li>彼此相邻？

Question

我在这里有一个样机布局.基本上有部分,列和字段,它们都是作为元素<ul>和<li>元素的组合编写的.这是专门为以后解析而完成的.

HTML的片段:

<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>A field</li>
        <li class="field"><span class="type">[Text] </span>Another field</li>
        <li class="field"><span class="type">[Text] </span>Yet another field</li>
    </ul>
</li>
<li class="layout"><span class="type">[Column] </span>
    <ul class="layout-children">
        <li class="field"><span class="type">[Text] </span>More fields</li>
        <li class="field"><span class="type">[Text] </span>And one more field</li>
    </ul>
</li>

如果您转到链接的内容,您会注意到这些列是垂直的.我希望列彼此相邻,但我不知道如何去做.

如果HTML没有改变,那就更好了,只有CSS.

Answer 1

display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;

Answer 2

我刚把它添加到你的CSS中:

ul .section-children li.layout {
    display : inline-block;
}

不幸的是,我不知道现在支持inline-block有多好.