CSS菜单如何使链接居中显示

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链接居中显示？

这是菜单的fiddle示例：http://jsfiddle.net/zJq52/

- user2710234

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 
}  

点击此处查看演示

更新 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: 完成版本！

这里是演示

- Ruddy

---

是的，请将 nav a 中的宽度从 width: 100px; 改为 width: auto;。我会在我的回答中放置一个演示。 - Ruddy

非常好 - 我已经在导航链接上添加了padding: 5px;，但效果不太好...我该如何在右侧和左侧添加padding？ - user2710234

你没有加上我刚才说的第一部分。这是你刚刚给我的更新后的居中版本。[http://jsfiddle.net/zJq52/9/] - Ruddy

它们是在HTML中的空格。确保您消除了<li></li>标签周围的所有空格，例如：如果我将所有<li>放在一起，空格就会消失。（不确定为什么我不能将它们排成一行。DEMO HERE） - Ruddy

最后一条评论，请选择一个答案，因为有很多。在我的编辑中，我会链接到已完成的版本。包括您要求的所有内容，包括填充。 - Ruddy

Answer 2

{{链接1：在线演示}}

将 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 用于合并后的代码，以及对我来说的结果：

如果您想将按钮在水平栏中作为一行居中，则只需对

应用width，因此添加一个新的类：<ul class="clearfix cont">并在媒体规则中对其进行样式设置，以便不影响其他布局：


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

jsFiddle和结果：

- totymedli

---

即使在您的演示中，链接也没有居中。 - Ruddy

当导航栏只有一行时，他们希望链接位于导航栏的中心，这不是他们要求的。 - Ruddy

我正在使用Chrome浏览器，这是它的外观：链接在此。 - Ruddy

@Ruddy 好的，我之前有不同的理解，但现在我也实现了你的解释。 - totymedli

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/

- umbriel

Answer 4

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

- Rohit Agrawal

Answer 5

选择使用浮点数并不总是正确的选择。

你的示例中，“nav ul”元素的固定宽度为600px，在只有4个约100px宽度的元素时看起来很奇怪。你无法居中它...

我基本上删除了浮动和清除浮动的代码。 然后，我根据我的做法进行了以下修改...

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的宽度？

- Ken Verhaegen

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*/
}  

- Neeraj Bhatt

Answer 7

非常简单。

将text-align: center添加到nav ul，并从nav li中删除float: left。

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

这是一个更新的代码片段：http://jsfiddle.net/qwUF7/

- Ennui