我的网站有一个菜单栏：它位于默认位置，但是我想要一个固定的菜单栏！
当我放置“ 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％；不在一行中... 而且在浏览器中，它并不漂亮！
答案 0 :(得分：0)
带有徽标图片和5个列表项，它们的20％试图在一行中容纳100％以上。 尝试使用li项的商品少于20％
答案 1 :(得分：0)
我建议为此使用Flex：它非常强大。 https://codepen.io/anon/pen/wxKZaw。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index:99;
cursor: pointer;
position:fixed;
display:flex;
width:100%;
}
li {
font-family:odin rounded;
font-size:40px;
flex:1;
/*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>
答案 2 :(得分：0)
您只需在width:100%;中添加ul，如下所示
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>