我已经在要拆分列表项的地方放了一个 div 标签。但是,当我向左或向右浮动时,它不起作用。我想创建一个导航栏,用户可以在其中浏览左侧的网站并在右侧管理他们的帐户。谁能帮帮我?
这是 HTML 和 CSS 代码:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
border-radius: 50px;
}
li {
float: left;
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<ul>
<div class="first">
<li><a href="">Home</a></li>
<li><a href="">Updates</a></li>
<li><a href="">Blog</a></li>
</div>
<div class="last">
<li><a href="">Sign In</a></li>
<li><a href="">Login</a></li>
</div>
</ul>
</div>
最佳答案
你能检查下面的代码吗?希望它对您有用。
根据 Html 标准,我们不能在 ul
(无序列表)中直接使用 div
,所以我们在 中添加了 2 个
分区。在 flex 属性、ul
.navigationdisplay:flex;
和 justify-content:space-between;
的帮助下,我们在 .navigation
中按照您的要求。
请引用此链接: https://jsfiddle.net/yudizsolutions/764rdezq/1/
.navigation {
background-color: #0f0f0f;
border-radius: 50px;
overflow: hidden;
display:flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:flex;
display: -webkit-flex;
}
li {
background-color: #0f0f0f;
}
li a {
display: block;
color: #8ca2ff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: #111;
}
<div class="header">
<div class="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Updates</a></li>
<li><a href="">Blog</a></li>
</ul>
<ul>
<li><a href="">Sign In</a></li>
<li><a href="">Login</a></li>
</ul>
</div>
</div>
关于html - 如何分隔 HTML 列表中的元素,使其在水平导航中像三个元素在一侧,两个在另一侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65563750/