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;
}

我也在使用Horizontal Nav Plugin（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;   
}

中心导航栏列表元素？

2 个答案: