内联块元素之间的空白

Question

我觉得这个问题不应该再存在了，但是我似乎找不到解决方法。 所以去。

 ul { list-style-type: none; width:150px; } ul.nav_sub_menu > li { width: 100%; } ul.nav_sub_menu > li a { display: inline-block; width: 100%; padding: 2.5px 0px 2.5px 5px; background: #213059; color: white; text-decoration: none; border-bottom: 5px solid #253767; } ul.nav_sub_menu > li a:hover { text-decoration: underline; background-color: #253767; } 

 <div class="nav_sub_menu_wrapper"> <ul class="nav_sub_menu"> <li> <a href="javascript:void(0)" class="nav_sub_button">About me</a></li><li> <a href="javascript:void(0)" class="nav_sub_button">Goals</a></li><li> <a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li><li> <a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li> </ul> </div> 

此示例生成带有display:inline-block锚标记的样式列表。您可能从一开始就注意到，每个列表项之间都用一条水平的白线隔开。 如果没有，请尝试放大或缩小浏览器（对我而言，可见度为110％）。

空白并不是在所有缩放级别上都可见，并且仅在Chrome中发生，这就是我茫然的原因。 如何开始对此进行故障排除？

仅供参考，我发现此链接很有用，但没有帮助。 我的Chrome版本：

Chrome版本56.0.2924.87（64位）

Answer 1

这是一个奇怪的问题。 我认为这可能与像素分辨率或密度有关。 但是我设法用下面的代码修复了它。

ul {
    list-style-type: none;
    width:150px;
}
ul.nav_sub_menu > li {
    width: 100%;
}

ul.nav_sub_menu > li a {
    display: inline-block;

    width: 100%;
    padding: 2.5px 0px 2.5px 5px;

    background: #213059;

    color: white;
    text-decoration: none;

    border-bottom: 5px solid #253767;
    float: left;
}

ul.nav_sub_menu > li a:hover {
    text-decoration: underline;
    background-color: #253767;
}

我只添加了float: left; 锚属性，它删除了列表项之间的白线。 尝试一下，看看它对不同的缩放级别有什么作用。 虽然它对我来说可以放大110％ 。