使 <ul> 列表响应式 - 最后一个 <li> 不向左浮动答案

【问题标题】：Making a <ul> list responsive - last <li> not floating left使 <ul> 列表响应式 - 最后一个 <li> 不向左浮动
【发布时间】：2014-07-28 15:21:02
【问题描述】：

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

我从所有 li 向左浮动开始。在 520 像素处，我只希望第三个 li 不浮动，所以我将 float:none 应用于那个。但是，这会导致第四个 li 不再浮动，并且简单地在第四个 li 上添加一个 float:left 是没有效果的。

<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>

【问题讨论】：

标签： html css list responsive-design css-float

【解决方案1】：

第三个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

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，那么在这种情况下，您的第三个列表元素将成为一个明确的修复程序。第 4 个元素仍然浮动，但低于第 3 个。

如果您希望第 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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

如果你的想法是把你的 li 变成 2 行，这就足够了：

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

DEMO

【讨论】：