水平菜单中心元素

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

尝试这样：已更新 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 2

使用float和text-align:

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

http://jsfiddle.net/5gLkdaw5/

Answer 3

见jsFiddle

您可以使用display:table;

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

nav ul li {
  display: table-cell;
}

Answer 4

试试这个： 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 5

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

水平菜单中心元素

Horizontal menu center elements

html

css

menu

center

horizontallist