内联块列表项之间的空间 [英] A Space between Inline-Block List Items
问题描述
可能重复：
内联块列表项中的不需要的margin
如何从HTML中删除隐形空间
为什么内联块列表项中有空格？
<！DOCTYPE html PUBLIC - / / W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>奇怪的清单< / title>
< style type =text / css>
li {
border：1px solid black;
display：inline-block;
height：25px;
list-style-type：none;
text-align：center;
width：50px;
}
ul {
padding：0;
}
< / style> ;,
< / head>
< body>
< ul>
< li>一个< / li>
< li>两个< / li>
< li>三< / li>
< / ul>
< / body>
< / html>
/ p>
我有
发现 inline-block 是一个
空格依赖方法，
取决于字体设置。在这种情况下渲染4px。
为了避免这种情况，您可以一起运行所有的
li 在一行或者块
结束标签和开始标签在一起
像这样：
code>< ul>
< li>
< div>第一< / div>
< / li>< li>
< div>第一< / div>
< / li>< li>
< div>第一< / div>
< / li>< li>
< div>第一< / div>
< / li>
< / ul>
如其他答案和评论所述，解决这个问题是为父元素添加 font-size：0;
ul {
font-size：0;
}
ul li {
font-size：14px;
display：inline-block;
}
这样更适合HTML可读性（避免在一起运行标签等）。间距效果是由于字体的间距设置，因此您必须为内置元素重置它，并为其中的内容重新设置。
Possible Duplicate:
Unwanted margin in inline-block list items
How to remove "Invisible space" from HTML
Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Weird Lists</title>
<style type="text/css">
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
I have seen this and answered on it before:
After further research I have
discovered that inline-block is a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.
To avoid this you could run all your
lis together in one line, or block
the end tags and begin tags together
like this:
<ul> <li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li> </ul>
As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.
这篇关于内联块列表项之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
