水平菜单中心元素

Question

我有以下文件：

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---------------------|

我需要添加到我的代码中，按照我想要的方式添加它？

Answer 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%;
}

Answer 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;
}

Answer 3

使用float和text-align：

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

http://jsfiddle.net/5gLkdaw5/

Answer 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>

Answer 5

请参阅jsFiddle

您可以使用display:table;

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

nav ul li {
  display: table-cell;
}