Question

我目前在这里有一个全宽导航栏：JSBIN

但有没有办法让菜单项的宽度扩大，以便它们占用所有的导航栏空间而不是只是在左边？

我希望如果有四个菜单项（例如A，B，C和D），导航栏将被分成四个相等的部分。

Answer 1

将li元素的固定宽度更改为百分比。

三个相等的部分

#navbar li{
float:left;
padding:10px 0px;
position:relative;
width:33.33333%;
}

四个相等的部分

#navbar li{
float:left;
padding:10px 0px;
position:relative;
width:25%;
}

Answer 2

要创建与元素编号无关的相同宽度，您需要使用它：

  #navbar{ 
    display: table;
    table-layout: fixed;
    width:100%
  }
  #navbar > li { 
    display:table-cell; 
    float:none !important;
    width:auto !important;
  }

Answer 3

您可以在导航栏周围放置一个div包装器，并将其宽度设置为100％并对齐文本中心。然后将ul导航栏设置为显示为内联块。这样做，您可以拥有任意数量的项目，并将它们集中在一起。

#wrapper {
    width: 100%;
    text-align: center;
    background-color:#40CC9D;
}
ul {
    display: inline-block;
}

JSBin

如何将菜单项置于导航栏中

3 个答案: