CSS 在 <div> 内的 <ul> 内水平居中/均匀分布 <li>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3259612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally centering/evenly distributed <li> inside of <ul> inside a <div>
提问by Josh K
Have a Navbar <div>, inside is a <ul>and each <li>contains a <a>with a link (this is for a navigation bar)
有一个 Navbar <div>，里面是一个<ul>，每个都<li>包含一个<a>带链接的（这是一个导航栏）
I looked on google and this site and i couldnt find exactly what i was looking for.
我查看了谷歌和这个网站，但我找不到我想要的东西。
What i want is to be able to keep my current style (using <li>with <a>'s inside) and i want the <li>to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul>(which is inside the navbar <div>).
我想是能够让我当前的风格（使用<li>带<a>的内侧），我想的<li>是均匀分布的，并集中（这部分顺其自然，如果他们是均匀分布的...）内<ul>（这是内部的导航栏<div>）。
Anyways if that doesnt make sense let me know, currently they are just left aligned...Heres what i have:
无论如何，如果这没有意义让我知道，目前它们只是左对齐......这是我所拥有的：
HTML:
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:
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 ;
}
I can also include my .navbar a{} if that is neccesary. I am very new to CSS so go easy, also I did look all over SO and Google first and couldnt find anything quite like this (Although maybe since I am new i dont realize its the same).
如果需要，我还可以包含我的 .navbar a{}。我对 CSS 很陌生，所以很容易，而且我确实首先浏览了 SO 和 Google，但找不到任何类似的东西（虽然也许因为我是新手，我没有意识到它是一样的）。
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this. Go ahead and link/post that instead, but i would prefer this way as it makes most sense to me.
如果这是一个错误的 CSS 方法和/或有更简单、更常用的方法来做到这一点。继续链接/发布，但我更喜欢这种方式，因为它对我来说最有意义。
Thanks
谢谢
采纳答案by meder omuraliev
This allows a widthless centered dynamic ulif you don't want to specify 90% width:
ul如果您不想指定 90% 宽度，这允许无宽度居中动态：
<!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]-->
Tested in IE6, FX 3.
在 IE6、FX 3 中测试。
EDIT: Alternate style without the extraneous element:
编辑：没有无关元素的替代风格：
<!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]-->
回答by SamGoody
You can use text-align:fixed to do this with just a few lines of CSS, no extra markup.
您可以使用 text-align:fixed 来完成此操作，只需几行 CSS，无需额外标记。
See my answer here: https://stackoverflow.com/a/15232761/87520
在此处查看我的答案：https: //stackoverflow.com/a/15232761/87520
<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>
回答by TedMilker
The proper way to do this these days is to just use Flexbox:
现在正确的做法是使用 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 */
}
回答by Fabian
Basically comes down to add text-align: centerto the ul and display: inline-blockto the li's.
基本上归结为添加text-align: center到 ul 和display: inline-blockli 的。
This seems to do the trick:
这似乎可以解决问题：
<!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>
回答by Picard
you can use "display: table" and "display: table-cell" the code is cleaner and the li width isn't hardcoded:
您可以使用“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;
}
回答by DHuntrods
Are you looking for something like this:?
你在寻找这样的东西：？
.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>
回答by Rito
you need to define a fixed with for your container .
你需要为你的容器定义一个固定的。
for example:
例如：
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
if you want to keep your bg color of .navbar, stick with 100%, remove float left from li and style it like this->
如果你想保持 .navbar 的 bg 颜色，坚持 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;
}
回答by Peter Gruppelaar
Well ive try'd every thing, nothing is working so if you have the same problem, then i would recommend you use tables and td's to align them, still works properly.
好吧，我尝试了所有事情，没有任何效果，所以如果您遇到同样的问题，那么我建议您使用表格和 td 来对齐它们，但仍然可以正常工作。
