gpt4 book ai didi

html - 如何在两个方向上 float ul?

转载 作者:太空宇宙 更新时间:2023-11-03 23:35:26 24 4
gpt4 key购买 nike

是否可以让一个“菜单栏”由单个 ul 组成,然后将一些 li float 到左侧,一些 float 到右侧?所以我现在的代码是

<body>
<header><nav><ul>
<li><a href="pg1.html">Menu1</a></li>
<li><a href="pg2.html">Menu2</a></li>
<li><a href="pg3.html">Menu3</a></li>
<li><a href="pg4.html">Menu4</a></li>
</ul></nav></header>
...
</body>

还有CSS:

header > nav {
background-color: red;
height: 2em;
}
header > nav > ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header > nav > ul > li {
float: left;
padding: 0 1em;
}
header > nav > ul > li > a {
display: block;
font-family: 'Tahoma';
color: white;
line-height: 2em;
}
a:hover {
color: yellow;
}
a {
text-decoration: none;
}

菜单项当然都在左侧,但是否可以在不“显着”更改 HTML 的情况下将某些菜单项 float 到右侧?

最佳答案

您可以在右侧的列表项中添加一个类,然后为 float:right; 添加 CSS 规则

例子:

添加到您的 CSS:

    .right {
float:right;
}

用这个替换你的 HTML5

 <header><nav><ul>
<li><a href="pg1.html">Menu1</a></li>
<li><a href="pg2.html">Menu2</a></li>
<li class="right"><a href="pg3.html">Menu3</a></li>
<li class="right"><a href="pg4.html">Menu4</a></li>
</ul></nav></header>

另一种选择是创建 2 个 div(一个向左浮动,另一个向右浮动),然后在每个 div 中放置一个列表。

关于html - 如何在两个方向上 float ul?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24297810/

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