內聯無序列表不正確居中

我有一個超級簡單的網站，here，它使用粘滯導航欄。列表項是左邊的幾個點，我不知道爲什麼。我想到了所有的邊緣和填充，但它不會讓步。我還應該指出我正在使用Bootstrap。內聯無序列表不正確居中

這裏是我的HTML：

<div id="nav-wrapper"> 
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix"> 
    <div class="navbar-inner" data-spy="affix-top"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#service-top">Services</a></li> 
      <li><a href="#contact-arrow">Contact</a></li> 
     </ul><!--/.nav--> 
     </div><!--/.nav-collapse collapse pull-right--> 
    </div><!--/.container--> 
    </div><!--/.navbar-inner--> 
</div><!--/#nav /.navbar navbar-inverse--> 
</div><!--/#nav-wrapper-->

這裏是我的CSS，這涉及到我的導航：

.navbar { 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    padding:0; 
    z-index:999; 
    margin-bottom:0; 
} 
.navbar.navbar-inverse .navbar-inner { 
    background: #390 url(../img/green-bg.png) repeat; 
    border:none; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    margin-bottom:0; 
} 
.navbar .nav, .navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
    padding:0 2em; 
    margin:0; 
} 
.navbar-inner { 
    text-align:center; 
    margin-bottom:0; 
} 
.navbar-inner ul.nav li { 
    text-align: center; 
} 
    .navbar .nav > li a{ 
    color:white; 
    background:rgba(0,0,0,0.2); 
    text-shadow:none; 
    font-size:1.5em; 
    font-family: marvel, serif; 
    padding:.5em 1em; 
    margin:.5em 1em; 
} 
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a { 
    color:white; 
    background: #390 url(../img/green-bg.png) repeat; 
    text-shadow:none; 
    font-size:1.5em; 
    font-family: marvel, serif; 
    padding:.5em 1em; 
    margin:.5em 1em; 
    -webkit-box-shadow: inset 0 0 10px #000; 
    -moz-box-shadow: inset 0 0 10px #000; 
    box-shadow:   inset 0 0 10px #000; 
} 
.navbar .nav > li { 
    padding:1em; 
    margin:0; 
} 
#nav.affix, #nav.affix-bottom { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 
#nav { 
    position:relative; 
    z-index:999; 
    -webkit-perspective: 1000; -webkit-backface-visibility: hidden; 
}

我知道這是一個小細節，但我一直在試圖修復它好幾天了，不知道爲什麼這會是一種痛苦。

感謝您的幫助，

布賴恩

來源

2013-02-13 Brian

你在說什麼列表項？請更具體的... – henser 2013-02-13 19:34:24

只有一組列表項目... – Brian 2013-02-13 23:30:30

你有10px的對.navbar .nav右邊距（bootstrap.min.css：9）推它一下左側。

更改此：

.navbar .nav { 
    display:block; 
    float:left; 
    left:0; 
    margin:0 10px 0 0; 
    position:relative; 
}

這樣：

.navbar .nav { 
    display:block; 
    float:left; 
    left:0; 
    margin:0; 
    position:relative; 
}

來源

2013-02-13 19:36:50 Musa

你的權利。我現在也看到它。你將如何覆蓋它？ – 2013-02-13 19:47:55

我已經將我的.navbar .nav邊距設置爲0。 – Brian 2013-02-13 23:36:37

好消息，在這裏是如何中心列表項：

添加一個名爲「.center」級像這樣：

<div class="navbar navbar-fixed-top center"> 
     <div class="navbar-inner"> 
     .... 
     </div> 
</div>

而且n使用這個CSS：

.center.navbar .nav, 
.center.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    *zoom:1; /* hasLayout ie7 trigger */ 
    vertical-align: top; 
} 

.center .navbar-inner { 
    text-align:center; 
}

重新調整下拉菜單，使用此：

.center .dropdown-menu { 
    text-align: left; 
}

This was taken from a previous answer.

現在，壞消息是，解決方案也集中在該菜單項手機菜單下拉爲平板電腦和移動視口。我真的只是張貼在那裏十分鐘前的問題在這裏：

How to Override/Undo CSS Class Attributes for Twitter Bootstrap

如果你找到一個解決方案，請讓我知道，因爲我們都在問同樣的問題！

來源

2013-02-13 19:38:02

內聯無序列表不正確居中

回答

相關問題