在nav中定位ul

Question

我正在尝试将未排序的列表放在导航中，但我希望它位于标题框的中心。

<div class="header-box">        
    <nav>
       <ul>
       </ul>
    </nav> 
</div>

http://jsfiddle.net/9zWm9/7/这是我在我的代码中使用它的小提琴。

Answer 1

使用text-align:center;定位列表和填充空格和行高为垂直中心

FIDDLE

CSS

nav ul li{
    display: inline;
    list-style-type: none;  
    text-align:center;
    padding:0 1px;
    line-height:49px;
}

Answer 2

首先，清除你的漂浮物。 编辑：我的一个朋友在div里面遇到了真正的问题，所以让我们改变它。

<div class="header-box">
    <nav>
        <ul>
            <li>AASD</li>
            <li>AASD</li>
            <li>AASD</li>
<li style="visibility:hidden;opacity:0;height:0;width:0;clear:both"></li>
        </ul>
    </nav>
</div>

和样式：

<style>


.header-box {
width: 400px;
height: 49px;
border: 1px solid green;
position: relative;
}
ul {
margin: 0 auto;
padding: 0;
text-align: center;
height: 100%;
margin: 13px auto;
}
nav li {
float: none;
list-style-type: none;
/* padding-left: 19px; */
/* margin-left: 20px; */
/* line-height: 50px; */
display: inline-block;
/* top: 0px; */
margin: 0 auto;
text-align: center;
}

</style>

Answer 3

请尝试此代码。使用所有浏览器

.header-box{
    float:left;
    width: 400px;
    height: 49px;   
    border: 1px solid green;
    position:relative;   
}
.header-box nav {
    float: right;   
    left: -50%;
    position: relative;
    display:block;
}
.header-box nav ul {
    left: 50%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
nav li{
    float: left;
    list-style-type: none;   
    line-height: 50px;
    padding:0 10px;
    position: relative;
}

Working Demo

Answer 4

使用保证金：0px自动;

.header-box{
    width: 200px;
    height: 49px;   
    border: 1px solid green;
}
nav li{
    float: left;
    list-style-type: none;  
   margin: 0px auto;
}

Answer 5

nav ul li{
        float: left;
        list-style-type: none;
       margin: 0px auto;
       padding-left: 19px;

    }

Answer 6

的 DEMO

.header-box{
    width: 400px; 
    border: 1px solid green;
    text-align:center;
}
nav ul{
    padding:0;
}
nav li{
    list-style: none;
    display:inline-block;
    margin-right: 10px;
    vertical-align: middle; 
}

Answer 7

nav ul {
   width : 100%;
   position:relative;
   float:left;
   margin-left:-25px;
}
nav li{
    position:relative;
    float: left;
    margin-left:10px;
    list-style-type: none;       
}

Answer 8

将CSS替换为以下..

.header-box{
    width: 400px;
    height: 49px;   
    border: 1px solid green;
}
nav ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
}
nav li{
    display:inline;
}

感谢

Answer 9

请使用以下代码更新您的css，但代码修改较少：

            .header-box{
                width: 400px;
                height: 49px;   
                border: 1px solid green;
                text-align:center;
            }
            nav{
                display:inline-block;
            }
            nav ul{
                padding-left:0;
            }
            nav li{
                float: left;
                list-style-type: none;
                padding-left: 10px;
                padding-right: 10px;
            }

Answer 10

 nav ul li{
        float: left;
        list-style-type: none;
        margin: auto;
        padding-left: 20px;
        position: relative;

    }