Question

我试图通过根据屏幕大小更改浮动状态来使无序列表响应。

我从所有李浮动到左边开始。在520px我希望第三个li只是不浮动，所以我将float：none应用于那个。但是，这会导致第四个li不再浮动，只需添加一个float：left到第四个li就没有效果了。

<head>
<style>

ul {list-style-type:none;}
ul li {width:100px;float:left;}
@media screen and (max-width:520px) {
    ul li#three {float:none;}
    ul li#four {float:left;}
}
</style>
</head>

<body>

<ul>
    <li id = "one"> Menu One </li>
    <li id = "two"> Menu Two </li>
    <li id = "three"> Menu Three </li>
    <li id = "four"> Menu Four </li>
</ul>

</body>

Answer 1

根据您的CSS，您的<li>已经浮动。

如果想要将你的利益放在两条线上，这就足够了：

@media screen and (max-width:520px) {
    ul li#three {clear:left;}
}

<强> DEMO

Answer 2

第三个li将不再浮动，因为您正在取消其浮动属性。所以li将获得其默认属性并获取其父级的宽度

对于你的问题，你需要改变这样的css：

ul {list-style-type:none;}
ul li {width:100px;float:left;}
@media screen and (max-width:520px) {
    ul li#three {clear:both;float:left;}
    ul li#four {float:left;}
}

看看这个小提琴：Fiddle link

Answer 3

如果我正确理解您的问题，那么您的第3个列表元素将成为此实例中的clearfix。第四个元素仍然漂浮，但是第三个元素仍在咆哮。

如果你想让第4个元素仍然漂浮在另外两个元素旁边，这将是一个解决方案：

HTML

<ul>
    <li id = "one"> Menu One </li>
    <li id = "two"> Menu Two </li>
    <li id = "four"> Menu Four </li>
    <li id = "three"> Menu Three </li>
</ul>

CSS

ul {list-style-type:none;}
ul li {
    float:left;
    width:100px;
    background: gray;
}
ul #three {
    float: none;
}
@media screen and (min-width:520px) {
    ul #four {
        margin-left: 100px;
    }
    ul #three {
        float: left;
        margin-left: -200px;
    }
}

http://jsfiddle.net/8cuPB/

Answer 4

如果您不想分配任何浮动元素，请不要设置float：none。因为通过在元素（先前已浮动）上设置float：none，这会导致这些元素在这些尺寸的屏幕上堆叠在一起。浮动导致元素并排排列。

所以请保持你的ul #three类为空或删除它。它会给出我所相信的相同结果。

使<ul>列表响应 - 最后<li>不浮动</li> </ul>

4 个答案: