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和set left和top pixel进行探索，两者都是第二组h2和ul。

Answer 3

正如已经指出的那样，你不能只用CSS做这件事。

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

这留下了另一种选择：如果你可以使用JavaScript ，你可以动态地将DIV包装在你的标题列表分组中，以达到同样的效果。

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

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

然后在你的css文件中，你会向左移div.grouped-list。 See a working example

Answer 4

我知道它并不好，因为它使用绝对位置，但这是我的解决方案： 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 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>