html - 奇怪的列表缩进

Question

我在 html/css 中制作了一个简单的菜单，侧面有一个奇怪的缩进，我似乎无法摆脱。

HTML:

<center><div id="menu">
<ul>
    <li>Home</li>
    <li>Videos</li>
    <li>Info</li>
</ul>

CSS:

    #menu ul {
        background-color:#F60;
        display:inline-block;
        border-bottom:5px solid #98FF00;
        list-style-type:none;
    }
    #menu ul li {
        display:inline-block;
        margin:2px 2px 0 2px;
        padding:5px 5px 0 5px;
        background-color:#98ff00;
        transition:background-color 0.5s;
        cursor:pointer;
        color:#F60;
    }
    #menu ul li:hover {
        background-color:#74C100;
    }

我已经包含了一个指向我遇到问题的 fiddle 的链接。

谢谢!

Jsfiddle:http://jsfiddle.net/GRA0007/4anrq8Lj/

Answer 1

你只需要将 padding-left: 0 添加到 ul 即可。

这是 fiddle

这是因为浏览器对每个元素都有一些默认样式。对于 ul 元素，它默认具有一定数量的 padding-left(我认为在 Chrome 上为 20px)。

Web 开发中这种事情的常见做法是以 "reset" 开始您的样式表。 ，即恢复所有浏览器默认设置。