Html 制作一个<；ul>；列表响应-最后一个<；李>；不左飘_Html_Css_List_Responsive Design_Css Float

Html 制作一个<；ul>；列表响应-最后一个<；李>；不左飘

html css list responsive-design

Html 制作一个<；ul>；列表响应-最后一个<；李>；不左飘,html,css,list,responsive-design,css-float,Html,Css,List,Responsive Design,Css Float,我试图通过根据屏幕大小改变浮动状态，使无序列表响应我从所有的李都向左浮动开始。在520像素时，我只希望第三个li不浮动，所以我对那个li应用float:none。但是，这会导致第四个li不再浮动，只需添加一个浮动：左至第四个li无效 <head> <style> ul {list-style-type:none;} ul li {width:100px;float:left;} @media screen and (max-width:520px) { ul

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

我从所有的李都向左浮动开始。在520像素时，我只希望第三个li不浮动，所以我对那个li应用float:none。但是，这会导致第四个li不再浮动，只需添加一个浮动：左至第四个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>


ul{列表样式类型：无；}
ul li{宽度：100px；浮点：左；}
@媒体屏幕和屏幕（最大宽度：520像素）{
ul li#三{浮动：无；}
ul li#four{float:左；}
}

菜单一
菜单二
菜单三
菜单四

第三个

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

查看此提琴：

如果我正确理解了您的问题，您的第三个列表元素将在本例中成为一个clearfix。第四个元素仍然浮动，但低于第三个元素

如果您希望第四个元素仍然漂浮在其他两个元素旁边，这将是一个解决方案：

HTML

如果不想分配任何浮动元素，请不要设置float:none。因为通过在元素上设置float:none（之前是浮动的），这会导致这些元素在屏幕大小上相互堆叠。漂浮会导致元素并排排列

因此，让你的ul#3类保持为空或移除它。我相信，它将给出与您预期相同的结果。

您的

已根据您的CSS浮动

如果想法是将您的li转换为两行，这就足够了：

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

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

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