Javascript CSS菜单制作链接中心

我的水平菜单有以下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链接显示在中心

这是菜单的一部分：

将导航a更改为：

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

我还必须提到，您有两个

nava

s。您应该将它们合并为一个，并应用一些更改：

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

对于合并的一个和我的结果：

如果您想将按钮作为水平条中的一行居中，只需将

宽度应用于
，然后添加一个新类：
并在媒体规则中设置样式，这样就不会影响其他布局：

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

结果是：

不确定您的确切意思，但如果您的意思是将所有li相对于其父li居中，请将宽度从600px更改为400px

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

演示：-
我会这样做：

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


下面是做你想做的事情的正确方法

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

选择浮动并不总是正确的

您的示例在“nav ul”元素上包含一个600px的固定宽度，当您只有4个~100px宽度的元素时，这很奇怪。你不能把它放在中心

我基本上删除了浮动和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;
}

我的例子是：

我发现您有其他版本可以按计划工作：
你没有在这里设置“nav ul li a”的宽度。
但是为什么“nav ul”的宽度是400px呢？
试试这个

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

超级简单

将
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;   
} 

这里有一个更新的提琴：
即使在您的演示中，链接也没有居中。这不是他们要求的，当导航在一条线上时，他们希望链接位于导航的中心。我使用的是Chrome，这是它的外观：@Ruddy Ok我的解释不同，但现在我实现了您的解释，效果也很好--是否可以使每个li链接自动宽度而不是固定宽度？是的，将
nava
中的宽度从
width:100px至
宽度：自动我将在我的答案中加入一个演示。非常好-我添加了填充：5px；也在导航a上，但看起来不太好。。。我怎样才能在左右两边加上填充物呢？我说的第一点你没有放进去。这就是你刚刚给我的更新到中心的那个。-如果您将鼠标悬停在服务上，左侧会有一个小的空白，但我想去掉这个空白，但我仍然希望在每个链接的左/右侧有一个空白/填充，这样它们就不会靠得太近。但是，悬停颜色（黑色）需要达到白色边框