센터 탐색 모음 요소를 나열 하시겠습니까?

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

내가 정확하게 귀하의 질문에,
을 이해한다면

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

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

Answer 2

몰라요 ...이 CSS 편집을 시도하지만, 당신이 원하는 경우 항목은 용기의 중간에 다른 옆에 하나입니다 당신을 첫 번째 링크의 앞에 작은 흰색 막대를 추가하려면이 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; 
}