Question

我在格式化无序列表时遇到了一些问题，无法在所有浏览器中正常工作。以下在Chrome中看起来不错，但在IE和Firefox中很奇怪。

这很简单，我知道，但我是新手，似乎无法做到这一点。

感谢您的帮助！

HTML：

<div id="leftcolumn">
<ul>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
</ul>
</div>

<div id="rightcolumn">
<ul>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
</ul>
</div>

这是CSS：

#leftcolumn {
    float: left;
    width: 50%;
    }

#rightcolumn {
    float: right;
    width: 50%;
    }

Answer 1

考虑使用

ul li{
    padding-bottom:1em;
}

而不是<br>

Answer 2

您必须使用有效的HTML代码<br>不是<ul>中的有效元素。

同样<li>是一个块元素，所以它总是填满整行，所以你不需要<br>

我的解决方案：

http://jsfiddle.net/9jKvW/

HTML：

<div id="leftcolumn">
<ul>
<li>Lorem Ipsum</li>

<li>Lorem Ipsum</li>

<li>Lorem Ipsum</li>

<li>Lorem Ipsum</li>
</ul>
</div>


<div id="rightcolumn">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</div>

CSS：

#leftcolumn {
    float: left;
    display:inline-block;
    width: 50%;
    background:red;
    }

#rightcolumn {
    float: right;
    display:inline-block;
    width: 50%;
    background:silver;
    }

跨浏览器的无序列表

2 个答案: