{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 对你真心纯属浪费 的问题《How to get rid of white space between css horizont》','https://www.manongdao.com/q-463602.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
This question already has an answer here:
I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
</head>
<body>
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">One1</a></li>
<li class="nav"><a class="nav" href="#">Two</a></li>
<li class="nav"><a class="nav" href="#">Three</a></li>
<li class="nav"><a class="nav" href="#">Four</a></li>
</ul>
</div>
</body>
</html>
The css:
ul.nav, ul li.nav {
display: inline;
margin: 0px;
padding: 0px;
}
ul.nav {
list-style-type: none;
}
li.nav {
background-color: red;
}
a.nav {
background-color: green;
padding: 10px;
margin: 0px;
}
a:hover.nav {
background-color: gray;
}
You can also set
font-size:0for the<ul>tag.You need to use
display:blockandfloat:lefton thelis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.Also see my similar question.
I'm afraid this is dirty too, but I'll be (pleasantly) surprised if there's a clean fix to this.
Put all your
<li>s on one line:Sorry.
Combine @Skilldrick and @teedyay and you have your answer and explanation.
If
<li>s are treated as words than any white space around them is condensed to one space.So I guess this is a feature that looks like a bug.
To remove the space either put all your
<li>s in a chain with no white space between them.OR
Reduce the font size on the
<ul>to 0 and restore the size on the<li>s