更改为固定位置，显示不佳

Question

我的 website:it 在默认位置有一个菜单栏，但我想要一个固定的菜单栏！
当我输入 "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%；它不在一行中... 而在浏览器中，它并不漂亮！

Answer 1

徽标图像和 5 个列表项占 20%，它试图在一行中容纳超过 100%。在 li 项目上尝试少于 20%

Answer 2

我建议为此使用 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>

Answer 3

您只需在 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>

更改为固定位置，显示不佳

Changing to position fixed, bad display

html

css

menu

menubar