Question

我在UL中有一系列LI，就像这样：

<ul>
    <li class="section left"></li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li class="section right"></li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
</ul>

这个HTML是由php生成的，我无法改变HTML，另一方面，我有能力为各个LI元素分配类。 UL和LI将包含表单元素，我想在两个部分中分配，在左侧浮动一些内容（一些LI），在右侧浮动一些内容（其他LI）。

如果我可以在主UL中嵌套UL，这将更容易，将内部UL视为块，但我不能在这里做。

如果给出上面提到的HTML约束，如何用CSS完成相同的结果？我的意思是，我可以为每个LI单独分配浮动类，但我希望在这里有一个更优雅的解决方案。

谢谢

Answer 1

不确定列表的确切位置......但是，如果您可以将正确的类分配给列表项，则可以设置CSS下面显示的线条定位它们：

<html>
<head>
    <style>
        li {width:300px; list-style-position:inside;}
        li.right {background:pink; text-align:right; direction:rtl;}
    </style>
</head>
<body>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li class="right">Item 3 -- right</li>
        <li>Item 4</li>
        <li class="right">Item 5 -- right</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ul>

</body>
</html>

Answer 2

添加以下CSS3代码：

ul{width:100%;list-style:none;}
/* the '~'  (general sibling combinator)
 * selector will select all following siblings in the document tree.
 * This selector is part of the CSS3 selector recommendation,
 * see also http://www.w3.org/TR/selectors/#general-sibling-combinators
 *
*/
li.section.left, li.section.left ~ li{
    background-color:#faa;
    float:left;
    margin-right:1em;
}
li.secton.right , li.section.right ~ li{
    background-color:#afa;
    float:right ;
    margin-left:1em;
    margin-right:0;
}

将此与您的建议代码一起使用，您将获得所需（至少在体面的浏览器中）。 JSFiddle Demo / Demo with small font size （见效果）

更新： IE7+ compatible version（根本没有:not）

Answer 3

嗯，有点难。元素的数量是固定的吗？

如果是这样，首先要考虑的是使用相邻的兄弟选择器（+）。

li.section.left,
li.section.left + li,
li.section.left + li + li,
li.section.left + li + li + li {
    float: left
}

浮动右元素相同...... 否则，我会尝试使用jquery来获取元素并为它们分配类。

Answer 4

我认为最好的解决方案是创建你喜欢的列表：

<div>
    <ul>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
        <li>I want to float this on the left</li>
        <li>I want to float this on the right</li>
    </ul>
</div>

然后在CSS中你给所有LI留下一个浮动并设置它们的样式。（我的意思是宽度，高度等等）之后在它周围构建一个小div并给它一个最大值，你想要你的形式（确保LI在2行中适合。）

这可能是一个解决方案，但我不知道你可以改变多少HTML。

使用CSS在UL内部浮动LI项目的部分

4 个答案: