我无法弄清楚填充物来自列表左侧的填充物:
http://jsfiddle.net/spadez/rAQYL/15/
据我所知,以下代码应该阻止这种情况发生。任何人都可以向我解释这是从哪里来的?
* {
padding: 0px;
margin: 0px;
border: 0px;
}
答案 0 :(得分:1)
来自
display: inline-block;
应用于#header ul li。
你可以使用
float: left;
或者给予
margin-left: -3(4)px to each li.
答案 1 :(得分:0)
您尚未关闭a
中的h1
作为开头,这会在项目之间添加奇怪的链接,但我相信间距的原因是您没有浮动它们默认情况下,当你的li项目有任何“块”变化时,它们之间会有间距。
在下面的示例中,我修复了未关闭的标记并添加了一个浮点数,希望这就是您要做的事情。
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;
}
答案 2 :(得分:0)
您的列表元素设置为:
display:inline-block;
因此默认情况下它们之间有空格(它被视为内联文本,意味着每个列表之间有一个空格)。 为了清除该空间,您可以添加以下内容:
#header ul { font-size: 0; }