div中心列表(导航栏)

时间:2014-01-10 07:34:31

标签: html css

离开本教程(http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/)顶部的注释,我试图将页面中两个链接的列表居中,但它只是第一个列表项而不是整个列表的中心。

li{
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
}
ul{
    text-align: center;
}

div#nav-list {

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;

    width: auto;
    height: auto;
    background: #E8E8E8;
}

“nav-list”是导航栏的容器,如图所示为灰色。

这是问题 - 你可以看到“约”是集中的,但不是整个列表。 enter image description here

提前致谢! 编辑:这是HTML:

<div id="center_content">
    <h1 id="page-heading">Title</h1>
    <hr id="first-rule"></hr>
    <div id="nav-list">
        <ul>
            <li>about</li> <li>work</li> 
        </ul>
    </div>
    <hr></hr>
    <p>Here is a paragraph. </p>
</div>

5 个答案:

答案 0 :(得分:1)

删除列表填充。默认情况下,列表左侧有40px个填充。尝试使用ul{ padding:0; }

答案 1 :(得分:0)

尝试应用以下样式:

ul { 
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 170px; /*as per your need*/
}

答案 2 :(得分:0)

为您详细说明:http://jsfiddle.net/theStudent/6UnNs/

<强> CSS

li {
    font-family: Futura, Arvo, sans-serif;
    display: inline-block;
    padding: 10px;
}

ul {
    text-align: center;
    background:red;
    width: 25%;
    margin:0 auto;
}
ul li:first-child {

    background:#ccc;
    display:block;
    margin:0 0 0 -40px;
}

<强> HTML

<ul>
    <li>TITLE</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 2</li>
</ul>

只是玩设置我添加了一些颜色,所以你可以看到

答案 3 :(得分:0)

试试这个

<div>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

div ul li{float:left;list-style:none;margin:0 10px}
div ul{display: inline-block;margin: 0 auto;}
div{text-align:center}

JSFiddle

答案 4 :(得分:0)

你走了:

1)在nav-list元素

上设置text-align: center;

2)在列表中设置d isplay: inline-block

<强> FIDDLE

li {
    font-family: Futura, Arvo, sans-serif;
    display:inline-block;
    padding: 0 10px;
}
ul{

    list-style: none;
    display: inline-block;
    padding:0;
}

div#nav-list {

    text-align: center;
    background: #E8E8E8;
}