Question

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

要调整菜单以使菜单条上的项目间隔相等，似乎唯一的方法是使用表格宽度= 100％作为菜单包装，将项目作为td。所以他们会自动调整。

是否有另一种解决方案（没有td），考虑到我们不知道物品的数量，而且它可以变化？

Answer 1

您可以<ul> / <ol>一个display: table和<li>一个display: table-cell。

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

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

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

http://jsfiddle.net/8RXUw/

Answer 2

无序列表，列表项设置为内联显示

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>和<menuitem>标签（例如<ul>带有<li>或嵌套的<div>标签等）。另外，除了<menuitem>标签外，我们还可以将<li>标签与<menu>标签一起使用，因为当前大多数Web浏览器都不支持该标签。

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

4 个答案: