0

只是匆匆忙忙，我可能在这里很傻，但无论如何：

我有一个以边距居中定位的导航，它有一个链接列表，我遇到的问题是因为我的所有<li>类都被赋予了 css：float:left它们在左侧对齐。

例如：

导航示例

我想知道是否有任何方法可以使这些居中？

谢谢

CSS：

section#nav {
    height: 45px;
    margin-bottom:5px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
nav {
    max-width: 700px;
    height: 45px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 auto;
}

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    float:left;
}

nav ul li a {
    color: #FFFFFF;
    margin:0 10px;  
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
    color:#FFFFFF !important;
}

nav ul li a:hover {
    color:#CCCCCC !important;
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

HTML：

<section id="nav">
  <nav>
    <ul class="nav">
      <li class="nav-selected nav-path-selected">
        <a class="nav-selected nav-path-selected" href="/">Home</a>
      </li>
      <li>
        <a href="/about/">About Us</a>
      </li>
      <li>
        <a href="/opportunities/">Opportunities</a>
      </li>
      <li>
        <a href="/inspiration/">Inspiration</a>
      </li>
      <li>
        <a href="/members/">Members</a>
      </li>
    </ul>
  </nav>
</section>
4

5 回答 5

1

你可以这样

ul{
    display:block;
    width:100%;
    text-align:center;
}

ul>li{
    display:inline;
}

使用 display:inline 代替 display:inline-block 可能不会影响外观，但允许在 IE 7 上正确显示

在这里查看jsfiddle.net/kmcYE/2

于 2012-07-26T22:57:25.390 回答
0

将您的 < ul > 元素放在 < div > 中，然后在页面上调整 div 的大小并将其居中。只要将 div 设置为明确的宽度值（例如菜单项的宽度），然后将 div 的左右边距设置为自动，它就会自动居中。

于 2012-07-26T22:55:50.547 回答
0

如果在您的licss 上，唯一需要的调整：

请参阅此工作小提琴示例。

添加

display:inline-block;

消除

float:left;
于 2012-07-26T22:59:18.883 回答
0

给nav ul一个display: inline-block;属性。这会将列表缩小到其内容的宽度，并在其包含元素中水平居中。

示例：http: //jsfiddle.net/VMqUe/

于 2012-07-26T23:00:53.570 回答
0

谢谢大家，我结合了您的答案来构建解决方案：

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    display:inline-block;
    display:inline;
}
于 2012-07-27T16:41:14.513 回答