html - 创建具有固定宽度的水平菜单的最佳方法

Question

我想知道，创建具有固定宽度和可变项目数量的水平菜单的最佳方法是什么？

要调整菜单以使菜单条上的项目等间距，似乎唯一的方法是table width=100%用作菜单包装器和td. 所以它们会自动调整。

td考虑到我们不知道项目的数量，而且它可能会有所不同，是否有另一种解决方案（没有）？

Answer 1

你可以给<ul>/ <ol>adisplay: table和<li>a display: table-cell：

HTML：

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

CSS：

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
}

http://jsfiddle.net/8RXUw/

Answer 2

列表项设置为的无序列表display: inline：

CSS：

<style type="text/css">
  ul li {
    display: inline;
  }
</style>

HTML：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 <li>item 5</li>
 <li>item 6</li>
</ul>

如果它需要固定宽度，您可以使用ul标签上的宽度。

Answer 3

嗯，试试这个：

.wrapper {
    width:100%; /*or fixed width*/
}
header {
    text-align:center;
}
nav {
    margin:0 auto
}
nav ul {
    list-style: none outside none;
    overflow: hidden;
    height: 20px;
    margin:0;
    padding: 5px;
    text-align: justify;
    cursor: default; 
}

nav ul li {
    display: inline;
    margin:0;
    padding:0;

}
nav ul li a {
    display: inline-block; 
    padding:5px 10px;
}

ul:after { 
    content: "1";
    margin-left: 100%;
    height: 1px;
    overflow: hidden;
    display: inline-block;
}

http://jsfiddle.net/inc1uder/VCy8L/13/

Answer 4

这几天我们可以使用HTML5和Grid CSS的好处：

menu {
  display: grid;
  grid-template-columns: repeat(4, auto);
}

  <menu>
  <menuitem>Item 1</menuitem>
  <menuitem>Item 2</menuitem>
  <menuitem>Item 3</menuitem>
  <menuitem>Item 4</menuitem>
</menu>

这种方法的优点是样式只适用于结构中的父元素，并且很容易扩展。

注 1：本规则 的等价形式：

grid-template-columns: repeat(4, auto);

也是：

grid-template-columns: repeat(4, 1fr);

或者

grid-template-columns: auto auto auto auto;

注2：当然，我们可以使用任何其他结构来代替<menu>and<menuitem>标签（例如<ul>with<li>或nested<div>标签等）。<menuitem>此外，我们也可以使用<li>带有标签的标签来代替<menu>标签，因为目前大多数 Web 浏览器都不支持该标签。