奇怪的列表缩进

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;
    }

我已经包含了一个链接到小提琴，我遇到了问题。

谢谢！

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

Answer 1

您只需将padding-left: 0添加到ul。

这是fiddle

原因是浏览器为每个元素都有一些默认样式。对于ul元素，默认情况下会有一些左侧的填充（我认为Chrome浏览器为20px）。

在Web开发中，这种事情的一种常见做法是使用"reset"启动样式表，即恢复所有浏览器默认值。