我的网站有一个菜单栏:它在默认位置，但我想要一个固定的菜单栏!
当我输入“position:fixed”时，它无法正确显示(在浏览器中)。请帮助我。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index:99;
cursor: pointer;
position:fixed;
}
li {
font-family:odin rounded;
font-size:40px;
float: left;
height:55px;
background-color:rgb(249,249,249);
width:20%;
border-right:1px solid black;
transition:color 1s, background-color 1s
}
li:hover {
color:white;
background-color:black;
}
li a {
display: flex;
display: -webkit-flex;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
img.logo {
height:55px;
width:auto;
position:fixed;
top:8px;
z-index:99;
}
.text {
display:flex;
align-items:center;
text-align:center;
justify-content: center;
}
a.main:hover {
background: transparent url('main.html');
cursor: pointer;
}<body>
<div>
<ul class="barre">
<li class="text"><a href="main.html"><img class="logo" src="https://thumb.ibb.co/kPPHmo/logo.png" alt="problem"></a><pre style="font-family:odin rounded"> Team NoMaD</pre></li>
<li class="text" onclick="location.href = 'main.html';">Menu</li>
<li class="text" onclick="location.href = 'members.html';">Membres</li>
<li class="text" onclick="location.href = 'calender.html';">Calendrier</li>
<li class="text" onclick="location.href = 'contact.html';">Contact</li>
</ul>
</div>
</body>菜单不在一行中:宽度为 100%；它不在一行中... 而在浏览器中，它并不漂亮!
最佳答案
你只需要在 ul 中添加 width:100%; 如下所示
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index:99;
cursor: pointer;
position:fixed;
width:100%;
}
li {
font-family:odin rounded;
font-size:24px;
float: left;
height:55px;
background-color:rgb(249,249,249);
width:20%;
border-right:1px solid black;
transition:color 1s, background-color 1s
}
li:hover {
color:white;
background-color:black;
}
li a {
display: flex;
display: -webkit-flex;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
img.logo {
height:55px;
width:auto;
position:fixed;
top:8px;
z-index:99;
}
.text {
display:flex;
align-items:center;
text-align:center;
justify-content: center;
}
a.main:hover {
background: transparent url('main.html');
cursor: pointer;
}<div>
<ul class="barre">
<li class="text"><a href="main.html"><img class="logo" src="https://thumb.ibb.co/kPPHmo/logo.png" alt="problem"></a><pre style="font-family:odin rounded"> Team NoMaD</pre></li>
<li class="text" onclick="location.href = 'main.html';">Menu</li>
<li class="text" onclick="location.href = 'members.html';">Membres</li>
<li class="text" onclick="location.href = 'calender.html';">Calendrier</li>
<li class="text" onclick="location.href = 'contact.html';">Contact</li>
</ul>
</div>关于html - 更改为固定位置，显示不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51336945/