中心导航栏列表元素？答案

【问题标题】：Center navbar List elements?中心导航栏列表元素？
【发布时间】：2014-04-21 11:25:53
【问题描述】：

我正在使用无序列表创建导航栏。我希望将我的列表元素（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/)。

【问题讨论】：

需要更多解释。放一张截图/小提琴

标签： jquery html css jsp menubar

【解决方案1】：

试试这个css编辑...

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

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

【讨论】：

【解决方案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;   
}

【讨论】：