2

怎么了

在上图中，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>
4

1 回答 1

4

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

您正在使用 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/

于 2011-03-19T19:26:09.463 回答