名单上的神秘边界或填充 [英] Mystery margin or padding on list

问题描述

我无法弄清楚填充是从哪一个的左边到另一个列表的左边：

http://jsfiddle.net/spadez/rAQYL/15/

到目前为止据我所知，下面的代码应该阻止这种情况的发生。任何人都可以请向我解释这是从哪里来的？

  * {
 padding：0px; 
 margin：0px; 
 border：0px; 
 
  

解决方案

a 在你的 h1 中是一个在项目之间添加奇怪链接的开始，但我相信间距是你没有浮动他们，默认情况下，当你有任何变化的'块'应用时，你的李项目之间有间距。

在下面的例子中，我已经修复了未封闭的标签，并添加了一个浮动，希望这是你想要做的。

查看这个小工具

HTML：

 < div id =container> 
< div id =header> 
< h1>< a href =index.html>管理员< / a>< / h1> 
< ul> 
< li>< a href =jobs.html>工作< / a>< / li> 
< li>< a href =sites.html>网站< / a>< / li> 
< li>< a href =feeds.html> Feeds< / a>< / li> 
< / ul> 
< / div> 
< div id =content>内容转到此处< / div> 
< / div> 
  

CSS：

  * {
 padding：0px; 
 margin：0px; 
 border：0px; 
 font-family：Helvetica，Arial; 
 font-size：13px; 
} 
 #header {
 background-color：＃1ABC9C; 
} 
 #header a {
颜色：白色; 
 text-decoration：none; 
} 
 #content {
 background-color：#EEEEEE; 
 padding：20px; 
} 
 #header h1，#header ul li，#header ul {
 display：inline-block; 
} 
 #header ul li，#header h1 {
 padding：15px 20px; 
背景：＃16AD8F; 
 float：left; 
} 
  

I cannot figure out where the padding is coming from the on the left of the list between each one:

http://jsfiddle.net/spadez/rAQYL/15/

As far as I know, the following code should stop this from happening. Can anyone please explain to me where this is coming from?

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

解决方案

You hadn't closed the a in your h1 for a start which was adding weird links between the items, but I believe the reason for the spacing is you haven't floated them and by default there is spacing between your li items when they have any variation of 'block' applied.

In the example below i've fixed the unclosed tag and added a float, hopefully this is what you were looking to do.

See this fiddle of it working

HTML:

<div id="container">
    <div id="header">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Jobs</a></li>
            <li><a href="sites.html">Sites</a></li>
            <li><a href="feeds.html">Feeds</a></li>
        </ul>
    </div>
    <div id="content">Content goes here</div>
</div>

CSS:

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: Helvetica, Arial;
    font-size: 13px;
}
#header {
    background-color:#1ABC9C;
}
#header a {
    color: white;
    text-decoration:none;
}
#content {
    background-color:#EEEEEE;
    padding: 20px;
}
#header h1, #header ul li, #header ul {
    display: inline-block;
}
#header ul li, #header h1 {
    padding: 15px 20px;
    background: #16AD8F;
    float:left;
}

这篇关于名单上的神秘边界或填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！