链接之间的未知空间

发布于 2024-10-19 21:47:01 字数 875 浏览 1 评论 0原文

我有三个链接：

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a>
<a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;</a>
<a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>

我有一些 CSS 样式：

.f_link{
height:38px;
padding-top:12px;
margin:0px;
color:gray;
}
.f_link:hover{
color:black;
text-decoration:none;
}

How this html is displayed in FF 3.6, IE 8, and some version of Google Chrome: 在此处输入图像描述

这就是我希望它在我的三个主要浏览器中显示的方式：在此处输入图像描述

我使用了 firebug，它说这些链接之间没有填充或边距。那么那个空间是做什么用的，我怎样才能摆脱它呢？我愿意接受建议！

原文

I have three links:

<a href="/about" class="f_link">   About   </a>
<a href="/Login" class="f_link">   Login   </a>
<a href="/Create Account" class="f_link">   Create Account   </a>

I have some CSS styling for them:

.f_link{
height:38px;
padding-top:12px;
margin:0px;
color:gray;
}
.f_link:hover{
color:black;
text-decoration:none;
}

How this html is displayed in FF 3.6, IE 8, and some version of Google Chrome:
enter image description here

And this is how I would like it to be displayed in my three major browers:
enter image description here

I used firebug and it said there is no padding or margin between these links. What is that space there for then, and how can I get rid of it? I'm open to suggestions!

分享到QQ

分享到微博

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

发布评论

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

翻身的咸鱼 2024-10-26 21:47:01

换行符在 HTML 中被视为单个空格。您可以将标记更新为此（结束标记之前换行，但下一个 A 标记之前没有空格）

<a href="/about" class="f_link">   About   
</a><a href="/Login" class="f_link">   Login   
</a><a href="/Create Account" class="f_link">   Create Account   </a>

Line breaks are/should be treated as a single white space in HTML. You can update your markup to this (line break before the closing tag, but no space before the next A tag)

<a href="/about" class="f_link">   About   
</a><a href="/Login" class="f_link">   Login   
</a><a href="/Create Account" class="f_link">   Create Account   </a>

回复收藏 0 原文

知你几分 2024-10-26 21:47:01

将 float: left; 添加到 .f_link 声明中，这将删除空格。

http://jsfiddle.net/wMwEQ/

另外，使用对于间距来说是baaaad，尽管这在这里不是问题。

回复收藏 0 原文

醉生梦死 2024-10-26 21:47:01

您可能想要稍微改变您的布局以获得您正在寻找的结果......加上这个：

   About

确实没有必要。

HTML:
<ul class="my_list">
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
</ul>

CSS:
.my_list { overflow:hidden; } // Clear floats
.my_list li { float:left; list-style:none; margin:0; padding:0; }
.my_list li a { padding:0 10px; }

那应该做你想做的事。

You may want to slightly change your layout to get the results you're looking for...plus this:

   About

Is really unnecessary.

HTML:
<ul class="my_list">
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
</ul>

CSS:
.my_list { overflow:hidden; } // Clear floats
.my_list li { float:left; list-style:none; margin:0; padding:0; }
.my_list li a { padding:0 10px; }

That should do what you want.

回复收藏 0 原文