如何集中对齐浮动：左侧ul / li导航菜单与css？
[英]How to centrally align a float: left ul/li navigation menu with css?
问题描述
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? 我的问题是：如何将标题上方的导航栏对齐？
10 个解决方案
解决方案1
67 2009-12-09 17:12:36
这是一个不需要指定ul宽度的解决方案 。
解决方案2
21 已采纳 2009-06-28 15:55:52
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;
}
解决方案3
13 2009-06-28 16:00:16
Well, to use margin:0 auto on something, it must have a defined width. 好吧，要使用margin:0 auto on margin:0 auto ，它必须有一个定义的宽度。 Probably the best workaround is: 可能最好的解决方法是：
ul li {
display: inline;
list-style-type: none;
}
ul {
text-align:center;
}
解决方案4
5 2013-04-30 14:25:28
There are few settings like float, margin which may affect this code to work properly. 有一些设置，如float，margin，可能会影响此代码正常工作。 It works in IE7 too. 它也适用于IE7。 I got this code from an article over at CSS Wizardry . 我从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;
}
解决方案5
2 2009-06-28 15:59:05
You could set the <li> 's to be display: inline , then set text-align: center on the <ul> . 您可以将<li>设置为display: inline ，然后在<ul>上设置text-align: center 。 Doing that, you can remove the float: left from 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 . 这样做，您可以从列表项中删除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>
解决方案6
2 2014-12-16 14:41:16
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>
解决方案7
1 2017-06-08 07:55:24
ul {
display: inline-block;
text-align: center;
}
解决方案8
0 2015-02-18 04:51:12
.navigation ul
{
list-style-type: none;
padding: 0px;
width: 200px;
margin: 0 auto;
}
解决方案9
0 2017-02-10 16:42:21
If you want to keep using your floated LI in 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>
解决方案10
-1 2017-10-05 05:58:48
style="position: absolute; z-index: 1;"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.