在我最近的元素中，我有一个名为 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/