如何删除单词后的4个像素填充？

Question

​

​

在上面的图片中，在单词Contact之后有一个4像素的填充，当没有选择时，它看起来像是在分频器和反馈之间有5个像素的填充，在触点和分频器之间有9个像素的填充。我怎样才能摆脱接触后的那4个像素？

编辑:这里有一些代码。

.vdivider {
    width: 1px;
    height: 10px;
    border-left: 1px solid #666666;
    margin: 0px 5px;
}

<div id="footer">
    <a href="contact.php">Contact</a>
    <span class="vdivider"></span>
    <a href="feedback.php">Site Feedback</a>
</div>

Answer 1

看到你的代码会有很大的帮助，但我想我可以猜出没有它的问题是什么。

您正在使用padding-right分隔列表项，并使用1px边框作为分隔符。这种技术的问题是插入空格。如果您从列表中删除所有空格，这个问题就会得到解决。因此，可以像这样格式化您的代码：

<ul>
    <li>Contact</li><li>Site Feedback</li><li>Another Example</li>
</ul>

或者像这样：

<ul>
    <li>Contact</li><!-- prevent white space insertion
    --><li>Site Feedback</li><!-- prevent white space insertion
    --><li>Another Example</li>
</ul>

编辑：在看到代码后，我建议将代码重构为更具语义性的版本:内联列表。再说一次，这只是一个建议。如果你想要使用内联列表创建这种效果的更多细节，请让我知道，我会为你发布工作代码。

EDIT2: http://jsfiddle.net/EqSBT/1/