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

发布于 2024-10-23 19:08:06 字数 501 浏览 3 评论 0原文

发生了什么

在上图中，“联系人”一词后面有一个 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>

原文

What is happening

In the above picture there is a 4 pixel padding after the word Contact and when not selected it looks like there is a 5 pixel padding between the divider and feedback and a 9 pixel padding between contact and the divider. How can I get rid of those 4 pixels after Contact?

Edit: Here's some code.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兰花执着 2024-10-30 19:08:06

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

您使用 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>

编辑： 在看到您的代码后，我建议将您的代码重构为更具语义的版本：内联列表。再次强调，这只是一个建议。如果您想了解有关使用内联列表创建此效果的更多详细信息，请告诉我，我将为您发布工作代码。

编辑2： http://jsfiddle.net/EqSBT/1/

Seeing your code would help tremendously, but I think I can guess what the issue is without it.

You are using padding-right to separate list items, and are using a 1px border as a separator. The problem with this technique is white space insertion. If you remove all white space from your list, this will be solved. So either format your code like this:

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

Or like this:

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

EDIT: After seeing your code, I would suggest refactoring your code to the much more semantic version: an inline list. Again, this is just a suggestion. Let me know if you want more details on creating this effect using inline lists and I'll post working code for you.

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

回复收藏 0 原文

~没有更多了~