CSS：LI元素之间的额外间隙[重复]

Posted 2023-03-06

【中文标题】CSS：LI元素之间的额外间隙[重复]

【英文标题】：CSS: extra gap between LI elements [duplicate]

【发布时间】：2016-09-30 06:52:02

【问题描述】：

在this site,，当您将鼠标悬停在大页脚菜单中的菜单项上时，蓝色li:hover 的左侧和前一个li 的边框右侧有一个间隙（由下面的红色部分）：

我已放大 200% 并检查了该区域，但看不到导致此差距的原因。

你可以吗？

【参考方案1】：

使用 flexbox 非常简单

.home .footer-menu 
    display: flex;
    align-items: stretch;
    justify-content: center;

现在，只需调整按钮的文本垂直对齐方式

【讨论】：

谢谢。 Looks like only IE > 11 has some support.

这不能回答问题。 OP 在问为什么会有差距。

【参考方案2】：

你可以改变css

.home .footer-menu 
    border-bottom: 1px solid #EEE;
    border-top: none;
    margin-bottom: 0;

这样可以解决问题

  .home .footer-menu 
    border-bottom: 1px solid #EEE;
    border-top: none;
    margin-bottom: 0;
    font-size: 0; // Added this line

【讨论】：

这不能回答问题。 OP 在问为什么会有差距。

谢谢。如果我添加它，水平间隙将被删除，但现在li 顶部有一个间隙，请再次查看live site。

正如我所说，你没有回答这个问题。问题是“为什么会出现”，而不是“我该如何解决”。

@Steve 你注意到第一项没有空格吗？

是世锦。我们如何确保所有项目没有间隙？谢谢。

【参考方案3】：

您必须在您的li 中添加<!-- -->，请参阅下面的代码。

<ul class="footer-menu" id="menu-primary-menu"><li class="first-menu-item menu-item-type-post_type menu-item-object-page menu-item-38" id="menu-item-38"><a href="http://staging.venusanddiamonds.com/about-us">About Us</a></li><!--
--><li class="last-menu-item menu-item-type-post_type menu-item-object-page menu-item-39" id="menu-item-39"><a href="http://staging.venusanddiamonds.com/shopping">Shopping</a></li><!--
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40" id="menu-item-40"><a href="http://staging.venusanddiamonds.com/shipping">Shipping</a></li><!--
 --><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41" id="menu-item-41"><a href="http://staging.venusanddiamonds.com/jewellery">Jewellery</a></li><!--
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" id="menu-item-42"><a href="http://staging.venusanddiamonds.com/black-diamonds">Black Diamonds</a></li><!--
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" id="menu-item-43"><a href="http://staging.venusanddiamonds.com/bespoke">Bespoke</a></li><!-- 
--><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44" id="menu-item-44"><a href="http://staging.venusanddiamonds.com/coming-soon">Coming Soon</a></li>
</ul>

【参考方案4】：

出现的空格是内联块标签之间的实际空格。如果你有

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

那么空格将出现在行内块之间，就像你键入的单词之间出现空格一样。

如果你把它改成

<ul>
    <li>a</li><li>b</li><li>c</li>
</ul>

然后您将不再看到项目之间的空格。

一种轻松证明正在发生这种情况的方法是，您实际上可以突出显示这些空格，然后剪切和粘贴它们。

为了防止这种情况发生，可以设置

.footer-menu ul, .footer-menu-links ul 
    font-size:0px;

但这可能会影响子元素而没有简单的方法来纠正它，所以你也可以使用

.footer-menu ul, .footer-menu-links ul 
    word-spacing:-.25em;


.footer-menu ul *, .footer-menu-links ul * 
    word-spacing:normal;

或者在 html5 文档中，您可以简单地跳过结束标签来完全避免这个问题，因为它根本不关心。

如果这不可行，您还可以使用 cmets 像这样“屏蔽”空白：

<ul><!-- Comment tags can also be used to block off the whitespace
    --><li>a</li><!--
    --><li>b</li><!--
    --><li>c</li><!--
--></ul>

这允许您将元素分开，以提高每行一个项目的易读性，但阅读起来有点混乱。

【讨论】：

这是正常的浏览器行为吗？我以为浏览器会忽略这些空格。

浏览器会忽略 HTML 代码中的空格，但设置为 display:block 的 就像任何其他块元素一样。如果您在其中键入一个不在任何其他标签内的空格，它将呈现该空格。

例如，为了理解行为，将block 元素视为替换为<div>，将inline-block 视为替换为<span>。

我用过.footer-menu ul, .footer-menu-links ul font-size:0px; ，但现在有a gap at the top of each li。

尝试我提出的最后一种方式，使用 word-spacing 属性，或者将 font-size 设置回之前的 <ul> 标签的所有子级，或者按照我的建议删除<li> 元素的结束标签。

【参考方案5】：

这是空白。如果你这样写你的清单：

<li id="menu-item1">
    <a>Link</a>
</li><li id="menu-item2">
    <a>Link</a>
</li>

或

<li id="menu-item1">
    <a>Link</a>
</li><!--
--><li id="menu-item2">
    <a>Link</a>
</li>

而不是

<li id="menu-item1">
    <a>Link</a>
</li>
<li id="menu-item2">
    <a>Link</a>
</li>

它将消除间隙。

【参考方案6】：

希望对你有帮助。

display: inline-block ; 从左侧获取默认边距，所以 您可以使用负 4px o 边距将元素滑回原位（可能需要根据父级的字体大小进行调整）。 显然，这在较旧的 IE（6 和 7）中是有问题的， 但如果你不关心那些浏览器，至少你可以保持代码格式干净。

For your clarification i attached the Fiddle also:

https://jsfiddle.net/hehrvjhx/1/