1

简洁版本：

当两个列表彼此相邻时，有没有办法使用 CSS（或通过其他方式）来防止在两个列表之间添加新行？

长版（带代码）：

我有机器生成的 HTML，它不能智能地处理混合<ol>和<ul>元素的嵌套列表。（如果您猜到这是 Oracle UCM 动态转换器，您就赢了。）

具体来说，当源文档嵌套有序列表和无序列表时，生成的 HTML 会将所有有序列表标签关闭回顶层，并开始一个新的无序列表，使用多个无序列表标签来获得所需的缩进级别。

由于这些是块元素，因此浏览器会在列表之间使用不需要的换行符来呈现它。如果我可以直接控制 HTML，这将很容易，但可惜。我相信 CSS 是可行的，但我相对较少的 CSS 知识让我失望了。style="display: inline;"（对元素的天真使用<ul>对我不起作用。）

抽象，我得到：

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 
</ol></ol>

<ul><ul><ul><li>bullet, indent level3<li> 
            <li>bullet, indent level3<li>
</ul></ul></ul>

希望有一种方法可以使它成为这样的渲染版本：

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 

<ul><li>bullet, indent level3<li> 
    <li>bullet, indent level3<li>
</ul></ol></ol>

我希望这是一个简单的CSS。

谢谢！

4

1 回答 1

2

如果唯一可见的问题是列表之间的空白行，那么简单：

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}
于 2010-10-18T21:59:12.990 回答