gpt4 book ai didi

html - 使
    列表响应 - 最后一个
  • 不向左浮动

转载 作者:太空宇宙 更新时间:2023-11-04 03:46:02 25 4
gpt4 key购买 nike

我试图通过根据屏幕大小更改 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;}
}

DEMO

关于html - 使 <ul> 列表响应 - 最后一个 <li> 不向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24097344/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com