避免相邻HTML列表之间的新行?

时间:2010-10-18 21:51:49

标签: html css oracle-ucm

简短版本:

当两个列表彼此相邻时,有没有办法用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。

谢谢!

1 个答案:

答案 0 :(得分:2)

如果唯一可见的问题是列表之间的空白行,那么简单地说:

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}