任何人都可以发现此 html/代码有什么问题吗？当我在浏览器上查看此页面时，导航栏显示为两部分，左侧菜单显示在导航栏后面:
html
<ul>
<li><a href="#" class="title">Loja</a></li>
</ul>
<ul class="right">
<li><a href="#" class="user"/>username</li>
<li><a href="#">logout</a></li>
</ul>
</header>
<main>
<aside>
<ul>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
</aside>
<article>
</article>
</main>
CSS
header {
position: sticky;
top: 0;
background-color: #333;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: left;
}
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;
}
最佳答案
您也可以将位置设置为绝对位置。
@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite
|Luckiest+Guy|Slabo+27px|Open+Sans);
header {
position: absolute;
top: 0;
background-color: #333;
width:100%;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: left;
}
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;
}
aside ul {
list-style-type: none;
margin: 80px 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
aside li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-family: 'Special Elite', cursive;
}
/* Change the link color on hover */
aside li a:hover {
background-color: #555;
color: white;
}
aside li.active {
background-color: #4CAF50;
}
.title {
font-family: 'Luckiest Guy', cursive;
}
.user {
font-family: 'Slabo 27px', serif;
}
div.main {
font-family: 'Open Sans', sans-serif;
}
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}<body>
<header>
<ul>
<li><a href="#" class="title">Loja</a></li>
</ul>
<ul class="right">
<li><a href="#" class="user"/>username</li>
<li><a href="#">logout</a></li>
</ul>
</header>
<main>
<aside>
<ul>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
</aside>
<article>
</article>
</main>
</body>关于html - 导航栏显示分为两部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37648414/