文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的无序列表不能正确地居中？

问为什么我的无序列表不能正确地居中？
EN

Stack Overflow用户

提问于 2012-08-27 06:03:28

回答 2查看 1.2K关注 0票数 0

它似乎试图居中，但实际上是几个像素的偏差。这真的很烦人。

图片来源：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;
}

非常令人沮丧。>_<

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-08-27 06:16:37

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

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

DEMO。

票数 3

Stack Overflow用户

发布于 2012-08-27 06:07:08

UL有一个默认的左边距，你还没有处理过。只需添加边距: 0；

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12134264

复制

相似问题

问为什么我的无序列表不能正确地居中？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的无序列表不能正确地居中？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的无序列表不能正确地居中？
EN