在<div>中，水平居中/均匀分布<ul>内的<li>。

Question

在<div>中，水平居中/均匀分布<ul>内的<li>。

30

有一个导航栏 <div>，里面有一个 <ul>，每个 <li> 中都包含一个链接的 <a>（用于导航栏）。

我在谷歌和这个网站上搜索，但没有找到完全符合我要求的内容。

我想要的是保持当前的样式（使用带有 <a> 的 <li>），并且我希望 <li> 在 <ul> 内均匀分布并居中（如果它们均匀分布，这一部分自然而然地实现...），而这个 <ul> 是在导航栏的 <div> 内部的。

无论如何，如果不清楚，请让我知道，目前它们只是左对齐...下面是我的代码：

HTML：

<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

CSS：

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 90%;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}

如果必要的话，我也可以包含我的 .navbar a{}。我很新手，所以请温柔一点。我在 Stack Overflow 和 Google 上都找了，但没找到类似的内容（可能是因为我太新了，还没有意识到是相同的方法）。

如果这种 CSS 方法有问题，或者有更简单、更常用的方法，请提供链接或发布它们，但我更喜欢这种方法，因为对我来说最合理。

- Josh K

8个回答

12

现在正确的做法是使用Flexbox：

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}

- TedMilker

你能再解释一下吗？ - Dieter Meemken

运行得非常好。只需注意浏览器的兼容性。 - anthonygore

9

你可以使用text-align:fixed属性，只需几行CSS代码，无需额外的标记即可实现此功能。

查看我的答案：https://dev59.com/Gmw05IYBdhLWcg3wcRUj#15232761

<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>

<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 } 
</style>

- SamGoody

2

基本上就是在ul中添加text-align: center，并在li中添加display: inline-block。这似乎就可以解决问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
</body>
</html>

- Fabian

看起来我需要为我的li使用inline-block显示，并为我的ul使用text-align: center！但这在IE中无法解决。 - Josh K

这在IE6和可能的其他IE中不起作用，因为li本来就是块级元素，你需要像我的答案中那样添加冗余规则（适用于IE）。 - meder omuraliev

这在IE8中完美运行，IE6确实支持inline-block。有趣的是，人们可以批评你，然后基本上复制你的答案，最终也得到了认可.... - Fabian

0

你可以使用"display: table"和"display: table-cell"，代码更清晰，li的宽度不是硬编码的。

<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>

.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    padding: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navbar li{
    padding: 2px;
    display:table-cell;
    width: 50px; /* just for the browser to get idea that all cells are equal */
    text-align: center;
    border: 1px solid #FF0000;
}

http://jsfiddle.net/dchwv6qn/1/

- Picard

0

你是否在寻找类似这样的东西？

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.navbar li{
    display:inline;
    line-height:30px;
}
.navbar li a { padding:.4em 5em;}


<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

- DHuntrods

0

你需要为你的容器定义一个固定的宽度。

例如：

.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

如果你想保留 .navbar 的背景颜色，就要让它的宽度为100%，移除 li 的左浮动，并按照以下样式进行设置：->

.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 800px;
    overflow: hidden;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
    marign: 0 auto;
}

- Rito

-2

嗯，我已经尝试了所有的方法，但什么都不起作用，所以如果你也遇到了同样的问题，我建议你使用表格和 td 元素来对齐它们，这仍然可以正常工作。

- Peter Gruppelaar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meder omuraliev · Accepted Answer

如果您不想指定90%的宽度，可以使用这种方法使无宽度居中动态的ul：

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

在IE6和FX 3中测试过。

编辑：没有多余元素的另一种样式：

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->