中心导航栏列表元素？

Posted 2023-02-16

【中文标题】中心导航栏列表元素？

【英文标题】：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/)。

【问题讨论】：

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

【参考方案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;