水平菜单中心元素答案

【问题标题】：Horizontal menu center elements水平菜单中心元素
【发布时间】：2015-07-17 23:51:36
【问题描述】：

我有以下文件：

html 文件

<nav>
    <ul>
        <li><b><a href="">Alle Rezepte</a></b></li>
        <li><b><a href="">Alle Zutaten</a></b></li>
    </ul>   
</nav>

css 文件

nav {
}

nav ul {
  text-align: center;   
}

nav ul li {
  display: inline;
}

在浏览器中是这样的

但我希望这两个元素在自己的一半中居中，像这样

|----------li1-----------|---------li2------------|

而不是

|---------------------li1|li2---------------------|

我必须向我的代码中添加什么以使其符合我的要求？

【问题讨论】：

nav ul li {浮动：左；宽度：50%；文本对齐：居中；列表样式：无；}
请尝试我的更新版本，因为所有其他版本只能使用 2 个元素。

标签： html css menu center horizontallist

【解决方案1】：

试试这个： http://jsfiddle.net/GCu2D/691/

CSS：

nav ul {
    text-align: center;
    margin:0;
    padding:0;
    list-style-type:none;
    white-space:nowrap;
}
nav ul li {
    float:left;
    width:50%;
}

【讨论】：

【解决方案2】：

试试这样：更新 Demo

 nav {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color:#ccc;
    border:1px solid #666;
}
nav ul {
    margin:0 auto;
}
nav ul li {
    display:inline-block;
    padding:10px 15px;
    list-style-type:none;
    background-color:#ccc;
    border-right:1px solid #666;
    text-align: center;
}
nav ul li a {
    font-weight:bold;
    display:block;
    text-align: center;
}

【讨论】：

这个版本完美运行，有很多项目也有很长的项目，非常感谢

【解决方案3】：

使用float 和text-align：

li {float: left; width: 50%; text-align: center; list-style: none;}
li a {display: block;}

http://jsfiddle.net/5gLkdaw5/

【讨论】：

如果我们在列表中添加第三个元素会怎样？
@AshotKhanamiryan 我也会感兴趣，因为以后我想在不重写 css 的情况下添加更多元素。
@danielr1996：只需将 50% 更改为 (100% / number of items)。
你可以在这里看到它jsfiddle.net/5gLkdaw5/1你可以试试我的变种，它将适用于所有数量的项目
@AshotKhanamiryan：您因为如果...而投了反对票？ 1. 有问题的是两个项目，而不是what if。 2. 使用display: table(-cell) 如果我想拥有相同宽度的所有项目，我需要声明cells 宽度。如果不声明宽度，则文本较长的单元格会更长。

【解决方案4】：

给 li 一个宽度。

在这里查看所有内容http://codepen.io/mike-grifin/pen/bdVZJP

CSS：

nav ul {
top: 0;
left: 0;
}

nav ul li {
}

.example {
 background-color: green;
 display: inline-block;
 padding: 20px;
 margin: 0;
 width: 46%;
 text-align: center;
 }

HTML：

<nav>
<ul>
    <li class="example"><b><a href="">Alle Rezepte</a></b></li>
    <li class="example"><b><a href="">Alle Zutaten</a></b></li>
</ul>   
</nav>

【讨论】：

【解决方案5】：

见jsFiddle

你可以使用display:table;

nav ul {
  text-align: center;   
  display:table;
  table-layout:fixed;
  width:100%;
}

nav ul li {
  display: table-cell;
}

【讨论】：