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 来完成此操作。

请参考小提琴：http: //jsfiddle.net/Pxtvh/

Answer 1

如果你可以使用 html，我会在每个标题和它的列表中加上

<div style="float:left">

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

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

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

Answer 2

就像 Waffle Face 建议的那样，您可以尝试使用 position: absolute 并设置 left 和 top 像素，用于第二组 h2 和 ul。

Answer 3

我知道这不是很好，因为它使用绝对位置，但这是我的解决方案：http: //jsfiddle.net/Pxtvh/25/

h2:nth-of-type(2){
    position: absolute;
    left: 100px;
    top: 0;
}
ul:nth-of-type(2){
   position: absolute;
    left: 100px;
    top: 1em;
}

Answer 4

如前所述，您不能仅使用 CSS 来执行此操作。

理想情况下，您可以将 DIV 包裹在标题和列表组周围，但您已声明无法编辑 html。

这留下了另一种选择： 如果您可以使用 JavaScript，您可以动态地将 DIV 包装在您的标题列表分组周围以实现相同的效果。

以下是使用 jQuery 执行此操作的方法：

$('h2 + ul').each(function () {
    $(this).prev().andSelf().wrapAll('<div class="grouped-list"/>');
});

div.grouped-list然后在你的css文件中你会向左 浮动。请参阅一个工作示例。

Answer 5

ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

这将使<ul>向左浮动然后编辑添加 HTML

<ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    <li>link 4</li>
</ul>

然后是第二个：

<ul>
    <li>link 1 column2</li>
    <li>link 2 column2</li>
    <li>link 3 column2</li>
    <li>link 4 column2</li>
</ul>