为什么我的无序列表中心不正确?

时间:2012-08-26 22:03:28

标签: html css

它似乎试图居中,但实际上是几个像素关闭。真的很烦人。

图片:http://i.imgur.com/X4jhf.png

我的代码:

HTML:

<body>
        <div class="menu-bar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
            </ul>   
        </div>

        <div class="greeting"></div>
    </body>

CSS:

.menu-bar {
    font-family: 'Lucida Grande';
}

.menu-bar ul {
    text-align: center;
    list-style-type: none;
}

.menu-bar li {
    display: inline;
}

.greeting {
    background: url('../media/pic.jpg');
    border: 1px solid black;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 375px;
}

非常令人沮丧。 &GT; _&LT;

2 个答案:

答案 0 :(得分:3)

MarginPadding都需要设置为0,除非您使用css reset来避免浏览器不一致。

.menu-bar ul {
    text-align: center;
    list-style-type: none;
    margin:0;
    padding:0;
}

DEMO

答案 1 :(得分:1)

UL有一个默认的左边距,你还没有处理过。只需添加保证金:0;