Live demo

Question

我的水平菜单有这个css：

nav {  
    height: 40px;  
    width: 100%;  
    background: #F00;  
    font-size: 11pt;  
    font-family: Arial;
    font-weight: bold;  
    position: relative;  
    border-bottom: 2px solid #FFFFFF;  
}  
nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
}
nav li {  
    display: inline;  
    float: left;  
}  
.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  
nav a {  
    color: #000000;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
}  
nav li a {  
    border-right: 1px solid #FFFFFF;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 0;  
}  
nav a:hover, nav a:active {  
    background-color: #000000;
    color:#FFFFFF;  
} 
nav a#pull {  
    display: none;  
}  
@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {  
        border-bottom: 1px solid #FFFFFF;  
        border-right: 1px solid #FFFFFF;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
}  
@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #FF0;  
        width: 100%;  
        position: relative;  
    }  
    nav a#pull:after {  
        content:"";  
        background: url('nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        rightright: 15px;  
        top: 10px;  
    }  
}  
@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #FFFFFF;  
    }  
}

如何让li链接显示在中心？

这是菜单的一个小提琴：http://jsfiddle.net/zJq52/

Answer 1

我会这样做：

nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
    text-align: center; // add text-align
}
nav li {  
    display: inline; // no more float in here 
}

DEMO HERE

更新1： 要使宽度自动：

nav a {  
    color: #000000;  
    display: inline-block;  
    width: auto;  // changed this from width: 100px; to auto. 
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
}

DEMO HERE

更新2： 完成版！

DEMO HERE

Answer 2

Live demo

将nav a更改为：

nav a {
   text-align: center;
   width: 100%;
}

我还要提到你有两个nav a。您应该将它们合并为一个并应用一点改变：

nav a {  
    color: #000000;  
    display: inline-block;
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    width: 100%;  
    padding: 0 10px; 
}

jsFiddle为合并后的结果和我的结果：

Result

如果您想将按钮作为一行放在水平栏中，那么只需将width应用于<ul>，然后添加一个新类：<ul class="clearfix cont">并将其设置为媒体规则，因此它不会影响其他布局：

@media screen and (min-width: 600px) {  
   .cont {width: 380px;}
}

jsFiddle和结果：

Final result

Answer 3

不确定您的意思，但如果您的意思是将所有li与其父级相关联，则将宽度从600px更改为400px

nav ul {
padding: 0;
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
}

演示： - http://jsfiddle.net/zQehH/2/

Answer 4

UPDATED DEMO JSFiddle

这是执行所需内容的正确方法

<强> CSS -

nav ul {  
    padding: 0;  
    margin: 0 auto;
    width:800px;
    text-align:center;
    height: 40px;  
}
nav li {  
    display: inline-block;  //use inline block
}  
nav a {  
    color: #000000;  
    display: inline-block;  
    padding: 0 20px; //use padding instead of width
    text-decoration: none;  
    line-height: 40px;  
}

Answer 5

选择浮动并不总是正确的。

当你只有4个~100px宽的元素时，你的例子在“nav ul”元素上包含600px的固定宽度是很奇怪的。你无法集中......

我基本上删除了浮点数和clearfixes。然后我根据我的方式将其包含以下内容..

nav {
  margin: 0 auto;
  text-align: center;
}
nav ul {
  margin: 0 auto;
  text-align: center;
  width: auto;
}
nav ul li {
  display: inline;
  display: inline-block;
}
nav ul li a {
  /*width: 100px;*/
  width: auto;
  padding: 0 10px;
}

我的例子： http://jsfiddle.net/xewl/4CrdN/1/

我看到你有其他版本按计划工作： http://jsfiddle.net/zJq52/6/ 你没有在这里设置“nav ul li a”的宽度。但为什么“nav ul”的宽度为400px？

Answer 6

试试这个

nav li a {  
border-right: 1px solid #FFFFFF;  
box-sizing:border-box;  
-moz-box-sizing:border-box;  
-webkit-box-sizing:border-box;  

text-align:center; /*Added Line*/
}

Answer 7

超级简单。

将text-align: center添加到nav ul，然后从float: left移除nav li。

nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 600px;  
    height: 40px;  
    text-align: center;
}
nav li {  
    display: inline;   
}

这是一个更新的小提琴：http://jsfiddle.net/qwUF7/

CSS菜单使链接中心

7 个答案:

Live demo