gpt4 book ai didi

html - 导航栏中元素的对齐

转载 作者:行者123 更新时间:2023-11-28 05:45:19 25 4
gpt4 key购买 nike

在我最近的元素中,我有一个名为 index.html 的 View ,其代码如下:

  <body>
<header>
<ul>
<li><a th:href="@{/}" class="title">Loja</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
<ul class="right">
<li><a href="#" class="user"/>username</li>
<li><a th:href="@{/admin}">admin</a></li>
<li><a th:href="@{/logout}">logout</a></li>
</ul>
</header>
</body>

header 的 css 样式是这样的:

header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

header ul.right {
float:right;
}

header li {
float: left;
}

header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Oxygen Mono';
}

header li a:hover {
background-color: #111;
}

header li.active {
background-color: #4CAF50;
}

当我在浏览器中打开此页面时,位于右侧的元素显示在另一行中(请参阅:https://jsfiddle.net/klebermo/ch6gtj3p/)。任何人都知道我可以在 css 中更改什么来解决这个问题?

最佳答案

因为左侧菜单栏没有 float 。你应该添加:

header ul {
float: left;
}

然后设置 header 标签的背景颜色:

header {
background-color: #333;
overflow: hidden;
}

关于html - 导航栏中元素的对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37648255/

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