blocks|key|276778|text|我以前见过并回答过这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|276779|在further+research之后，我发现inline-block是一个依赖于空格的方法，并且依赖于字体设置。在这种情况下，将渲染4px。|offset|length|style|CODE|276780|为了避免这种情况，您可以在一行中一起运行所有的li，或者像这样一起阻止结束标记和开始标记：|276781|276782|blockquote|276783|276784|Example+here。|276785|276786|正如其他答案和评论所提到的，解决此问题的最佳实践是将font-size:+0;添加到父元素：|276787|ul+{
++++font-size:+0;
}

ul+li+{
++++font-size:+14px;
++++display:+inline-block;
}|code-block|syntax|javascript|276788|这对于HTML的可读性更好(避免将标签放在一起运行等)。间距效果是由于字体的间距设置造成的，因此您必须为内联元素重置它，并为其中的内容重新设置它。|276789|entityMap|0|LINK|mutability|MUTABLE|url|http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/|1|http://jsfiddle.net/Kyle_Sevenoaks/t7dut/^0|0|N|C|1|G|0|0|N|2|0|0|0|0|0|C|1|0|0|Q|D|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@$D|1B|E|1C|F|G]]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|H|3|I|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|K|3|-4|5|L|7|1K|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|P|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|S|3|T|5|U|7|1U|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]|17|$5|12|13|14|A|$15|18]]]]

I have seen this and answered on it before: 

After <a href="http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/" rel="noreferrer">further research</a> I have
 discovered that <code>inline-block</code> 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
 <code>li</code>s together in one line, or block
 the end tags and begin tags together
 like this:

<blockquote>
<pre><code>&lt;ul&gt;
 &lt;li&gt;
 &lt;div&gt;first&lt;/div&gt;
 &lt;/li&gt;&lt;li&gt;
 &lt;div&gt;first&lt;/div&gt;
 &lt;/li&gt;&lt;li&gt;
 &lt;div&gt;first&lt;/div&gt;
 &lt;/li&gt;&lt;li&gt;
 &lt;div&gt;first&lt;/div&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</blockquote>

<a href="http://jsfiddle.net/Kyle_Sevenoaks/t7dut/" rel="noreferrer">Example here</a>.

<hr>

As mentioned by other answers and comments, the best practice for solving this is to add <code>font-size: 0;</code> to the parent element: 

<pre><code>ul {
 font-size: 0;
}

ul li {
 font-size: 14px;
 display: inline-block;
}
</code></pre>

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.

blocks|key|274811|text|解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|274812|ul+{
++++font-size:+0;
}

ul+li+{
++++font-size:+14px;
++++display:+inline-block;
}|code-block|syntax|javascript|274813|必须将父字体大小设置为0|274814|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Solution:

<pre class="lang-css prettyprint-override"><code>ul {
 font-size: 0;
}

ul li {
 font-size: 14px;
 display: inline-block;
}
</code></pre>

You must set parent font size to 0

blocks|key|2983220|text|我将添加浮动向左的CSS属性，如下所示。这就消除了额外的空间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2983221|ul+li+{
++++float:left;
}|code-block|syntax|javascript|2983222|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I would add the CSS property of float left as seen below. That gets rid of the extra space.

<pre class="lang-css prettyprint-override"><code>ul li {
 float:left;
}
</code></pre>

blocks|key|280424|text|实际上，这并不是特定于display:inline-block的，也适用于display:inline。因此，除了David+Horák的解决方案之外，这也是可行的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|280425|ul+{
++++font-size:+0;
}
ul+li+{
++++font-size:+14px;
++++display:+inline;
}|code-block|syntax|javascript|280426|entityMap^0|B|K|11|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Actually, this is not specific to <code>display:inline-block</code>, but also applies to <code>display:inline</code>. Thus, in addition to David Horák's solution, this also works:

<pre class="lang-css prettyprint-override"><code>ul {
 font-size: 0;
}
ul li {
 font-size: 14px;
 display: inline;
}
</code></pre>

blocks|key|280436|text|另一种解决方案，类似于Gerbus'+solution，但这也适用于相对字体大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|280437|ul+{
++++letter-spacing:+-1em;+/*+Effectively+collapses+white-space+*/
}
ul+li+{
++++display:+inline;
++++letter-spacing:+normal;+/*+Reset+letter-spacing+to+normal+value+*/
}|code-block|syntax|javascript|280438|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/11906591/1366033^0|B|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Another solution, similar to <a href="https://stackoverflow.com/a/11906591/1366033">Gerbus' solution</a>, but this also works with relative font sizing.

<pre class="lang-css prettyprint-override"><code>ul {
 letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
 display: inline;
 letter-spacing: normal; /* Reset letter-spacing to normal value */
}
</code></pre>

blocks|key|3196742|text|我也有同样的问题，当我在我的菜单上使用行内块时，我在每个"li“之间留出了空格，我找到了一个简单的解决方案，我不记得我在哪里找到它了，不管怎样，这就是我所做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3196743|<li><a+href="index.html"+title="home"+class="active">Home</a></li>
<li><a+href="news.html"+title="news">News</a></li>
<li><a+href="about.html"+title="about">About+Us</a></li>
<li><a+href="contact.html"+title="contact">Contact+Us</a></li>|code-block|syntax|javascript|3196744|您在的两端和开头之间添加一个注释符号："li“，然后水平空间消失。希望这是问题的答案，谢谢|3196745|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had the same problem, when I used a inline-block on my menu I had the space between each "li" I found a simple solution, I don't remember where I found it, anyway here is what I did.

<pre><code>&lt;li&gt;&lt;a href="index.html" title="home" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;!----&gt;
&lt;li&gt;&lt;a href="news.html" title="news"&gt;News&lt;/a&gt;&lt;/li&gt;&lt;!----&gt;
&lt;li&gt;&lt;a href="about.html" title="about"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;!----&gt;
&lt;li&gt;&lt;a href="contact.html" title="contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
</code></pre>

You add a comment sign between each end of, and start of : "li" 
Then the horizontal space disappear.
Hope that answer to the question 
Thanks

blocks|key|3196670|text|只需删除html代码中li之间的分隔符...使li只在一行中..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3196671|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

just remove the breaks between li's in your html code...
make the li's in one line only..

blocks|key|276846|text|即使它不是基于inline-block的，这个解决方案也值得考虑(允许从较高级别进行几乎相同的格式控制)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|276847|ul+{
++display:+table;
}
ul+li+{
++display:+table-cell;
}|code-block|syntax|javascript|276848|独立于|276849|IE8%2B+&+major+browsers+compatible|unordered-list-item|276850|Relative/fixed字体大小的independent|276851|HTML代码格式化(不需要粘合</li><li>)|276852|276853|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/css-table^0|7|C|0|0|0|0|W|0|0|0|F|9|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|P|3|Q|5|O|7|1B|8|@]|D|@]|E|$]]|$1|R|3|S|5|O|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

Even if its not <code>inline-block</code> based, this solution might worth consideration (allows nearly same formatting control from upper levels).

<pre><code>ul {
 display: table;
}
ul li {
 display: table-cell;
}
</code></pre>

<ul>
<li><a href="http://caniuse.com/css-table" rel="nofollow">IE8+ &amp; major browsers compatible</a></li>
<li>Relative/fixed font-size independent</li>
<li>HTML code formatting independent (no need to glue <code>&lt;/li&gt;&lt;li&gt;</code>)</li>
</ul>

<blockquote>
 Possible Duplicate: 
 <a href="https://stackoverflow.com/questions/4969082/unwanted-margin-in-inline-block-list-items">Unwanted margin in inline-block list items</a> 
 <a href="https://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html">How to remove “Invisible space” from HTML</a> 
</blockquote>



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.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>li {
 border: 1px solid black;
 display: inline-block;
 height: 25px;
 list-style-type: none;
 text-align: center;
 width: 50px;
}
ul {
 padding: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li&gt;One&lt;/li&gt;
 &lt;li&gt;Two&lt;/li&gt;
 &lt;li&gt;Three&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>

A Space between Inline-Block List Items

可能重复：为什么行内块列表项中有空格？无论我如何将我的列表项添加到菜单中，我总是会得到空格。​li { border: 1px solid black; display: inline-block; height: 25px; list-style-type: none; text-align: center; width: 50px;}ul { padding: 0;}<ul>

问行内块列表项之间的空格
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行内块列表项之间的空格EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行内块列表项之间的空格
EN