div中链接之间的Css间隙
div中链接之间的Css间隙
提问于 2012-06-29 03:04:43
CSS新手在这里。奇怪的事情发生了，我的链接之间有差距，我不知道为什么。
我使用超文本标记语言html5样板css进行重置。
HTML代码：
<div id="style-switcher">
<a href="#" id="theme-1" data-theme="css/theme1.css">Link 1</a>
<a href="#" id="theme-2" data-theme="css/theme2.css">Link 2</a>
<a href="#" id="theme-3" data-theme="css/theme3.css">Link 3</a>
<a href="#" id="theme-4" data-theme="css/theme4.css">Link 4</a>
</div>CSS
#style-switcher
{
position: fixed;
top:0;
left: 0;
}
#style-switcher a
{
color: #EEEEEE;
text-decoration: none;
font-size: 3.3em;
text-align: center;
background-color: #333333;
}JS小提琴：http://jsfiddle.net/RX7cg/
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-29 03:16:34
您的links元素将呈现为内联。
我建议你把float:left;加进去，
这样就不会再有差距了。
查看示例：http://jsfiddle.net/RX7cg/3/
Stack Overflow用户
发布于 2012-06-29 04:10:46
就像Simon说的，你的锚元素是内联的。这意味着元素之间的空格将呈现为字符空格。(它可能在视觉上看起来像边际，但它不是。)它与单词之间的空格相同。您可以浮动，如果这是您正在寻找的布局类型，或者如果您想让它们保持内联，您可以通过重写标记来消除字符空格，如下所示：
<div id="style-switcher">
<a href="#" id="theme-1" data-theme="css/theme1.css">Link 1</a
><a href="#" id="theme-2" data-theme="css/theme2.css">Link 2</a
><a href="#" id="theme-3" data-theme="css/theme3.css">Link 3</a
><a href="#" id="theme-4" data-theme="css/theme4.css">Link 4</a>
</div>仔细看看结束标记是如何被颠簸下来的。此模式使代码相对清晰。处理这个问题的其他模式是编目的here。
Stack Overflow用户
发布于 2012-06-29 04:11:56
尝试添加单词间距和字母间距属性：http://jsfiddle.net/RX7cg/17/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11251243
复制相关文章
相似问题
腾讯云开发者
