我试图通过根据屏幕大小更改 float 状态来使无序列表具有响应性。
我从所有 li 都向左浮动开始。在 520px 处，我只希望第三个 li 不 float ，所以我将 float:none 应用于那个。但是，这会导致第四里不再 float ，简单地向第四里添加一个 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>
最佳答案
你的 <li> s 已经根据您的 CSS float 。
如果想法是将你的 li 变成 2 行，这就足够了:
@media screen and (max-width:520px) {
ul li#three {clear:left;}
}
关于html - 使 <ul> 列表响应 - 最后一个 <li> 不向左浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24097344/