Html 如何集中对齐浮动：左 ul/li 导航菜单与 css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1055134/
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
How to centrally align a float: left ul/li navigation menu with css?
提问by Adam Taylor
So I have the following CSS in place to display a horizontal navigation bar using:
因此，我使用以下 CSS 来显示水平导航栏：
.navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.navigation li {
float: left;
margin: 0 1.15em;
/* margin: 0 auto;*/
}
.navigation {
/* width: auto;*/
/* margin: 0 auto;*/
text-align: center;
}
My question is: how do I align the navigation bar centrally above the title?
我的问题是：如何在标题上方居中对齐导航栏？
采纳答案by Emily
Give your .navigation ul a width and use margin:0 auto;
给你的 .navigation ul 一个宽度并使用 margin:0 auto;
.navigation ul
{
list-style: none;
padding: 0;
width: 400px;
margin: 0 auto;
}
回答by Ben Marini
回答by Fat Lotus
Well, to use margin:0 autoon something, it must have a defined width. Probably the best workaround is:
好吧，要margin:0 auto在某物上使用，它必须具有定义的宽度。可能最好的解决方法是：
ul li {
display: inline;
list-style-type: none;
}
ul {
text-align:center;
}
回答by Nizam Kazi
There are few settings like float, margin which may affect this code to work properly. It works in IE7 too. I got this code from an article over at CSS Wizardry.
像浮动、边距这样的设置很少会影响此代码的正常工作。它也适用于 IE7。我从CSS Wizardry 上的一篇文章中得到了这段代码。
.navigation ul
{
list-style: none;
padding: 0;
margin: 0;
text-align: center;/*make this change*/
}
.navigation li
{
float: none;/*make this change*/
display:inline;/*make this change*/
margin: 0 1.15em;
/* margin: 0 auto; */
}
.navigation li a {
display:inline-block;/*make this change*/
}
.navigation
{
/*width: auto;*/
/*margin: 0 auto;*/
text-align: center;
}
回答by Marc
This one works great with me! (if I'm correct: IE7+)
这个对我很好用！（如果我是对的：IE7+）
Fiddle: http://jsfiddle.net/fourroses666/zj8sav9q/3/
小提琴：http: //jsfiddle.net/fourroses666/zj8sav9q/3/
.nav{list-style:none; text-align:center;}
.nav ul{list-style:none;}
.nav li{display:inline;}
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;}
<nav class="nav" role="navigation" aria-label="main navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Onze producten</a></li>
<li><a href="#">Impressie</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
回答by John Kugelman
You could set the <li>'s to be display: inline, then set text-align: centeron the <ul>. Doing that, you can remove the float: leftfrom the list items and you don't need to have a fixed width for the navigation bar as you would if you used margin: 0 auto.
您可以将<li>'s 设置为display: inline，然后text-align: center在<ul>. 这样做，您可以float: left从列表项中删除 ，并且不需要像使用margin: 0 auto.
<html>
<head>
<style>
ul {
list-style: none;
text-align: center;
}
li {
display: inline;
margin: 0 1.15em;
}
</style>
</head>
<body>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</body>
</html>
回答by techloris_109
ul {
display: inline-block;
text-align: center;
}
回答by Ravi Chauhan
.navigation ul
{
list-style-type: none;
padding: 0px;
width: 200px;
margin: 0 auto;
}
回答by Niente0
If you want to keep using your floated LIin your code, you can use this:
如果你想在你的代码中继续使用你的浮动 LI，你可以使用这个：
JSFiddle: https://jsfiddle.net/Lvujttw3/
JSFiddle：https://jsfiddle.net/Lvujttw3/
<style>
.wrapper {
width: 100%;
background-color:#80B5EB;
text-align: center;
}
.intWrapper {
display: inline-block;
}
.mainMenu {
padding: 0;
min-height: 40px;
margin:auto;
}
ul {
list-style-type: none;
}
ul li {
float: left;
font-size: 15px;
line-height: 40px;
}
ul li A {
display: block;
color: white;
font-weight: bold;
font-family: Arial;
text-decoration: none;
min-height: 40px;
padding: 0 36px;
}
</style>
<div class="wrapper">
<div class="intWrapper">
<ul class="mainMenu">
<li><a href="one.htm" style='background-color:red'>ITEM ONE</a>
</li><li><a href="two.htm">ITEM TWO</a>
</li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>
</li>
</ul></div>
</div>
</div>
回答by Binu.C
style="position: absolute; z-index: 1;"
