html - ul li标签位置

Question

我有两组带标题的列表，需要并排显示，如下图所示:

这是我的 html:

<h2>Pages</h2>
<ul class="one">
     <li><a href="">About</a></li>
     <li><a href="">Archives</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Archives</a></li>
</ul>

<h2>Pages</h2>
<ul class="two">
    <li><a href="">About</a></li>
    <li><a href="">Archives</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Archives</a></li>
</ul>

我无法对 html 进行任何更改。我必须仅使用 css 来完成此操作。

请引用 fiddle : http://jsfiddle.net/Pxtvh/

Answer 1

如果你可以使用 html，我会用一个

包围每个标题和它的列表

<div style="float:left">

这行得通，我已经试过了，但是如果你想完全使用 css，我想你可以使用 css 代码:

ul.two {
    position:absolute;
    top:0px;
    left:100px;
}

这不会定位标题，因为它们都是，而且它们没有单独的类，所以除了如上所述更改 html 之外，我想不出解决方案。此外，如果您想更改第一个列表的宽度，则必须更新“left”参数。