CSS：LI元素之间的额外差距

Question

在this site,处将鼠标悬停在大页脚菜单中的菜单项上时，蓝色 ID || RecordDate || value ======================================== 1 || '2001-01-01' || 2 2 || '2002-01-01' || 2 3 || '2003-01-01' || 2 4 || '2007-01-01' || 4 5 || '2008-01-01' || 4 6 || '2011-01-01' || 6 7 || '2013-01-01' || 6 8 || '2014-01-01' || 6 左侧和前一个{{1的边框右侧有一个间隙（由下面的红色部分表示）：

我已经放大了200％并检查了这个区域，但看不出是什么造成了这个差距。

你能吗？

Answer 1

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

<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文档中，您可以简单地跳过结束标记以完全避免这个问题，因为它很简单并不关心。

如果这不可行，您还可以使用评论来阻止＆＃39;像这样的白色空间：

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

这允许你保持元素分开，以提高每行一个项目的易读性，但阅读时更加杂乱。

Answer 2

使用flexbox非常简单

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

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

Answer 3

您可以更改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
}

Answer 4

您必须在<!-- -->中添加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>

Answer 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>

它将消除差距。

Answer 6

可能对你有所帮助。

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

For your clarification i attached the Fiddle also:

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