Css HTML列表中的无意义填充

我有一个HTML列表，就像我制作的其他数百万个列表一样……它的行为方式真的让我很困惑

基本上，每个元素的右侧都有一个不可见的填充。我不知道它是否在超链接、列表项上，或者什么。。。但这是我所有的，供你评估

截图 行为

HTML 重置CSS

---

在

元素之间有空格，请删除该空格，并且UI中不再有多余的空格。你的回报导致了这一点

我创建了一个示例来向您展示它在没有空格的情况下工作

最终这是

display:inline块的结果属性。解决此问题的多种方法之一（除了删除空格/返回外）是使用
float:left
而不是
display:inline block
。或者，如果您想保持其原样，有时使用注释可以帮助格式化

<li>someLink</li><!-- 
--><li>secondLink</li>

--

这通常很容易修复，但有一些元素可能会应用填充/边距-最简单的方法是使用chrome并使用“inspect元素”功能悬停在html代码上（右键单击以找到它）-文档中的一个元素将明显显示为具有与我们在屏幕截图中看到的内容相对应的填充/边距

我的第一个猜测是，如果将每个链接向左浮动，会发生什么

#menu ul li a {
    float: left;
    display: block;
  }

否则，如果设置：

#menu ul li{
  display: block;
  float: left;
}
#menu ul{
  overflow: auto;
}

我没有任何空格。它们只是直接回车。好吧。我通过将
ulli
上的
display:inline block
更改为
float:left
，并将
ul
更改为“overflow:auto；”。谢谢。这是一个荒谬的错误。从编程的第一天起，你就被教导使用空格是不相关的。@Ciel不幸的是，web上到处都在使用空白来在链接、间隔符等之间创建空间。避免空白的方法通常是
float
方法。我理解你的痛苦。你的小提琴真的很有帮助。谢谢。@Ceil:制表符是空白字符，在HTML中，空白可以是相关的。“从编程的第一天开始，你就被教导空白是不相关的”——这并不是真的，有许多语言中空白是重要的（Python就是一个例子）.这个问题可能会有帮助：是的，这就是我最终修复它的方式。再说一次，这是一个非常愚蠢的错误。我不知道，也许我只是因为它困扰了我几个小时而感到沮丧。再次感谢你的帮助。
<li>someLink</li><!-- 
--><li>secondLink</li>

<nav id="menu" class="myfloatedelement">
 <ul>
  <li><a ref="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
 </ul>
</nav>

.myfloatedelement{
 overflow:auto;
}
.myfloatedelement ul{
 float:right;
 overflow:auto;
}
.myfloatedelement ul li{
 float:left;
}

#menu ul li a {
    float: left;
    display: block;
  }

#menu ul li{
  display: block;
  float: left;
}
#menu ul{
  overflow: auto;
}