Html 水平菜单中心元素

我有以下文件：

html文件

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

nav {
}

nav ul {
  text-align: center;   
}

nav ul li {
  display: inline;
}

在浏览器中看起来是这样的

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

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

而不是

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

---

我需要向代码中添加什么？以我想要的方式添加吗？

尝试这样做：更新

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

---

试着这样做：更新了

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

---

使用

浮动

和

文本对齐

：

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

---

使用

浮动

和

文本对齐

：

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

请参见

您可以使用

显示：表格

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

nav ul li {
  display: table-cell;
}

看

您可以使用
显示：表格

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

nav ul li {
  display: table-cell;
}

试试这个：

CSS:

试试这个：

CSS:

给李一个宽度

在这里都看到了吗

CSS:

HTML:






给li一个宽度

在这里都看到了吗

CSS:

HTML:






如果我们在列表中添加第三个元素怎么办？@AshotKhanamiryan我也会感兴趣，因为以后我想添加更多元素而不重写css。@danielr1996:只需将50%更改为（
100%/number of items
）。您可以在这里看到它，您可以尝试我的变体，这将是与所有计数的工作items@AshotKhanamiryan：你因为…而被否决了。。。？1.问题是两个项目，而不是假设。2.使用
display:table（-cell）
我需要声明
cell
s宽度，如果我希望所有项目都具有相同的宽度。如果不声明宽度，文本较长的单元格将变长。如果我们在列表中添加第三个元素呢？@AshotKhanamiryan我也会感兴趣，因为以后我想添加更多元素而不重写css。@danielr1996:只需将50%更改为（
100%/number of items
）。您可以在这里看到它，您可以尝试我的变体，这将是与所有计数的工作items@AshotKhanamiryan：你因为…而被否决了。。。？1.问题是两个项目，而不是假设。2.使用
display:table（-cell）
我需要声明
cell
s宽度，如果我希望所有项目都具有相同的宽度。如果不声明宽度，文本较长的单元格将变长。nav ul li{float:left；宽度：50%；文本对齐：居中；列表样式：无；}请尝试我的更新版本，因为所有其他版本只能使用2个元素。nav ul li{float:left；宽度：50%；文本对齐：居中；列表样式：无；}请尝试我的更新版本，因为所有其他版本都只能使用2个元素。此版本非常适用于多个项目以及非常长的项目，非常感谢此版本非常适用于多个项目以及非常长的项目，非常感谢