如何均匀分隔导航栏中的三个类别

Question

我需要通过1920px将我的导航栏分隔到四个偶数段 我试着保留左边：25％，并为每个李加倍，但它看起来不对我。

li{
float:left;
}

a{
color:#111;

ul{
position:fixed;
}

li a{
display: block;
padding: 14px 16px;
text-decoration: none; 
position:relative;
position:fixed;
}

li a:hover{
background-color: #111;
color: white;
}




 <ul>
 <li><a>Home</a></li>
 <li><a>Sign Up</a></li>
 <li><a>Forum</a></li>
 <li><a>Gallery</a></li>
 </ul>

Answer 1

最好在此方案中使用flexbox。您拥有多少元素并不重要，flexbox会为您管理所有元素：

＆＃13;

＆＃13;

* {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; display: block; padding: 5px; border: 1px solid #ccc; color: #000; border-radius: 3px; margin: 3px;}
ul {display: flex;}
ul li {flex-grow: 1; flex-basis: 0;}

＆＃13;

<h2>With 4 Columns</h2>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Sign Up</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">Gallery</a></li>
</ul>
<h2>With 3 Columns</h2>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Sign Up</a></li>
  <li><a href="#">Forum</a></li>
</ul>
<h2>With 5 Columns</h2>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Sign Up</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

使用此

CSS

ul
{
display:table;
width:100%;
}

li
{
display:table-cell;
}

使用单独的媒体查询来处理所需的移动视图ID。

希望这会有所帮助：D

Answer 3

flexbox可以使用justify-content: space-between

轻松完成此操作

您可以在此处阅读有关可用选项的更多信息Properties

ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  position: fixed;
  left: 0; right: 0;
}

a {
color:#111;
}

li {
  list-style: none;
}

li a {
display: block;
padding: 14px 16px;
text-decoration: none; 
}

li a:hover{
background-color: #111;
color: white;
}

 <ul>
 <li><a>Home</a></li>
 <li><a>Sign Up</a></li>
 <li><a>Forum</a></li>
 <li><a>Gallery</a></li>
 </ul>

Answer 4

使用flexbox或表格显示类型是一种更简单，更好的方法，但如果您想了解代码中的错误，那么

1）有结束括号＆＃39;}＆＃39;丢失

2）将ul宽度设置为100％。

3）然后应用margin-left属性但保持较少，因为100/25 = 4，它只是保证金，我们还没有计算每个li将占用的空间所以17％-18％将会将李传播到屏幕上方。

4）删除属性＆＃34; position：fixed＆＃34;在＆＃39; li＆＃39;