html - 合理的导航按钮

Question

我正在尝试为一个网站创建主导航菜单，该网站的主菜单项数量可变。导航栏是水平的，宽度为 738px。我想让最左边的元素距离元素的左边 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; }

这有两个限制:

1. 它将每个元素拉伸(stretch)到完整的可用宽度，而不是所需的宽度。如果你想要所需的宽度，你可以使用叶子 div 作为不会拉伸(stretch)的内容的容器；和

2. 你要提前知道 child 的数量。