3

我的水平菜单有这个 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/

4

7 回答 7

2

我会这样做：

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 
}

在这里演示

更新 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;  
}

在这里演示

更新 2： 完成版！

在这里演示

于 2013-10-04T12:23:02.877 回答
1

现场演示

改成nav a这样：

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

我还必须提到你有两个nav as。您应该将它们合并为一个并应用一些更改：

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

jsFiddle用于合并的一个，结果对我来说：

结果

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

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

jsFiddle和结果：

最后结果

于 2013-10-04T12:20:01.367 回答
0

不知道你的意思是什么，但如果你的意思是把所有 li 相对于它的父元素居中，将宽度从 600px 更改为 400px

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

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

于 2013-10-04T12:20:56.580 回答
0

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

当您只有 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？

于 2013-10-04T12:46:48.727 回答
0

更新的演示 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;  
}
于 2013-10-04T12:27:38.520 回答
0

尝试这个

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*/
}
于 2013-10-04T13:05:08.083 回答
-1

超级简单。

添加text-align: center到和从中nav ul删除。float: leftnav li

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

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

于 2013-10-04T13:20:22.003 回答