中心navbar列表元素？

Question

我正在使用無序列表創建導航欄。我希望我的列表元素（element1，element2）寫在外部創建的框的中心。

-----------              -------------  
    el1   whereas presently it is coming to the right like   el1 
-----------              ------------ 

HTML：

<div id="central-section" class="central-section-base"> 
      <div id="ddtopmenubar" class="mattblackmenu"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#" rel="ddsubmenu1">Element 1</a></li> 
        <li><a href="#" rel="ddsubmenu2">Element 2</a></li> 
        <li><a href="#" rel="ddsubmenu3">Element 3</a></li> 

       </ul> 
      </div> 

CSS：

.mattblackmenu ul{ 
margin: 0; 
padding: 0; 
font: bold 12px Verdana; 
list-style-type: none; 
border-bottom: 1px solid gray; 
background:  #153E7E; 
overflow: hidden; 
width: 100%; 
text-align: center; 
} 

.mattblackmenu li{ 
display: table; 
margin:0px auto 0px auto; 
text-align:center; 
} 

.mattblackmenu li a{ 
float: left; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 6px 8px; /*padding inside each tab*/ 
border-right: 1px solid white; /*right divider between tabs*/ 
color: white; 
background:  #153E7E; 
} 

我也使用水平導航插件（http://sebnitu.github.io/HorizontalNav/）。

Answer 1

試試這個CSS編輯...

.mattblackmenu li { 
width: 100%; /*new edit*/ 
} 

.mattblackmenu li a 
    { float:right; /*editing left to right*/ 
    } 

Answer 2

我不知道如果我理解正確的話你的問題，
但如果你需要的產品是一個在容器的中間旁邊另一個 你可以使用這個CSS代碼Fiddle

.mattblackmenu ul{ 
margin: 0; 
padding: 0; 
font: bold 12px Verdana; 
list-style-type: none; 
border-bottom: 1px solid gray; 
background:  #153E7E; 
overflow: hidden; 
width: 100%; 
text-align: center; 
} 

.mattblackmenu li{ 
display: table; 
margin:0px auto 0px auto; 
text-align:center; 
display:inline-block; 
} 

.mattblackmenu li a{ 
float: left; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 6px 8px; /*padding inside each tab*/ 
border-right: 1px solid white; /*right divider between tabs*/ 
color: white; 
background: #153E7E; 

} 

要在第一個鏈接的前面加一個白色的小酒吧，你也應該這樣選擇添加到您的CSS代碼

.mattblackmenu li:first-of-type{ 
border-left: 1px solid white; 
}