Question

我有一个简单的水平列表菜单，当我有一个填充的全局（*）设置时工作正常：0。由于其他原因，我需要取出填充作为全局设置，但我无法想象如何使其适用于列表。

现在，列表中的每个条目都有一个空白块，可能位于第一个条目左侧半英寸处。如果我可以摆脱它，我会被设定。这是一个小提琴（http://jsfiddle.net/eha77way/），我将粘贴代码。

谢谢！

CSS

    * {
    border:0;
    margin:0;
}

/* navigation */

#navigation, #episodenav, #pivotnav {
    border-top:3px solid #FFF;
    border-right:1px solid #FFF;
    margin:0 auto;
    list-style:none;    
}


#pivotnav {
    background:#F0F0F0;
    border-top:3px solid #FFF;
    border-right:1px solid #FFF;
    margin:0 auto;
    width:755px;
    height:25px;
    list-style:none;
}

#navigation {
    background:#E0E0E0;
    width:755px;
    height:40px;
}
#episodenav {
    width:756px;
    background:#F0F0F0;
    height:25px;
}
#pivotnav {
    width:755px;
    background:#F0F0F0;
    height:25px;
}

#navigation li, #episodenav li, #pivotnav li {
    border-left:1px solid #FFF;
    float:left;
    list-style:none;
}

#navigation li, #pivotnav li {
    width:150px;
}
#episodenav li {
    width:41px;
}

#navigation a, #episodenav a, #pivotnav a {
    color:#000;
    display:block;
    text-align:center;
}
#navigation a {
    line-height:40px;   
}
#episodenav a, #pivotnav a {
    line-height:25px;
}

/* content */
#content {
    height:auto;
    margin:50px auto;
    position: relative;
    padding:30px;
    width:751px;
    background: white; 
    -moz-box-shadow: 0 0 20px black; 
    -webkit-box-shadow: 0 0 20px black; 
    box-shadow: 0 0 20px black;
    font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
#content h1 {
    border-bottom:1px dashed #999;
    font-size:2em;
    padding:25px 5px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h2 {
    font-size:1.6em;
    padding:25px 5px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content h3 {
    font-size:1.1em;
    padding:20px 5px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}
#content p {
    padding: 10px 5px;
    line-height: 21px;
}
#content textarea {
    border: 1px solid #cccccc;
}
#list {
    margin-left: 50px;
}

HTML

    <body>

    <div id="content">

    <div id="navigation">
        <ul>
            <li><i>Ulysses</i> by Episode</a></li>
            <li>Pivot Points</a></li>
            <li>Projects</a></li>
            <li>Collections</a></li>
            <li>About Ashplant</a></li>
        </ul>
    </div>

<h2>TEST</h2>

</div>

</body>
</html>

Answer 1

这是你的意思吗？

#navigation ul{
    padding: 0;
}

Answer 2

填充位于ul元素中，而不是li。这是浏览器的默认设置，当子弹可见时非常需要。

您可以添加css规则集，例如：

#navigation ul {
  padding: 0;
}

至少在my jsbin上，这就是诀窍。

从css中的ul中删除填充

2 个答案: