Question

我正在尝试为具有可变数量的主菜单项的网站创建主导航菜单。导航栏是水平的，宽度为738像素。我想从左边开始最左边的项目18px，从元素的右边缘开始最右边的项目18px，其他菜单项在它们之间均匀分布。我正在使用无表格布局。

到目前为止，我还没能让它完全像我想要的那样工作。设置margin: auto似乎没有帮助，我无法使用表格保持两边的18px边距。一个想法是使用text-align: justify，但它不能证明单行。

是否有一种简单或不那么简单的方法，或者我将不得不要求AD放宽他的视觉要求？

Answer 1

假设：

<div id="nav">
  <div id="inner">
    <div>item one</div>
    <div>item two</div>
    <div>item three</div>
    <div>item four</div>
  </div>
</div>

使用：

#inner { margin: 0 18px; overflow: auto; }
#inner div { width: 25%; float: left; }

这有两个限制：

它将每个项目拉伸为完整的可用宽度，而不是所需的宽度。如果你想要所需的宽度，你可以使用叶子div作为容器，用于不会拉伸的内容;以及
您必须提前知道孩子的数量。

Answer 2

使用无序列表的html

<ul class="NavBar">
<li><a href="#" class="First">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#" class="Last">Item</a></li>
</ul>

和CSS

.NavBar
{
display:block; margin:auto;
width:738px;
}    
.NavBar li
{
display:inline;
text-align:justify;
list-style:none;
width:140px;
}

.Navbar .First
{
margin-left:18px;
}

.Navbar .Last
{
margin-right:18px;
}

Answer 3

如果菜单项的数量是可变的，我想不出纯粹的CSS解决方案。您可以使用Javascript计算每个项目的宽度，具体取决于有多少，并动态修改CSS（这可以通过jQuery等DOM / Javascript库轻松完成），但需要注意的是，停用的Javascript可能会破坏您的布局

Answer 4

如果我理解你的问题，那可以帮到你一点点：

html：

<ul class="lnkList">
  <li><a href="#">Item</a></li> 
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

css：

ul.lnkList{display:block; float:left; margin:auto; width:708px; 
       height:20px; padding:0px 15px;}

 ul.lnkList li{list-style:none; display:block; float:left; 
        width:111px; margin:0px 3px;}

 ul.lnkList li a{display:block; float:left; width:111px;}

它只是一个例子，说明如果你有6个街区你可以做什么。它是有道理的。

合理的导航按钮

4 个答案: