0

CSS新手在这里。奇怪的事情正在发生，我的链接之间有差距，我不知道为什么。

我正在使用 html 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

4 回答 4

1

就像西蒙说的那样，你的锚元素是内联的。这意味着元素之间的空格将呈现为字符空格。（它在视觉上可能看起来像边距，但实际上不是。）它与单词之间的空格相同。您可以浮动，如果这是您正在寻找的那种布局，或者如果您想让它们保持内联，您可以通过重写标记来消除字符空间，如下所示：

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

仔细查看结束标签是如何被撞倒的。这种模式使代码相对清晰。处理该问题的其他模式在此处进行了编目。

于 2012-06-28T20:10:45.690 回答
0

您的 links 元素呈现为inline。
我建议你添加float:left;它们，
这样就不会再有差距了。
查看示例：http: //jsfiddle.net/RX7cg/3/

于 2012-06-28T19:16:34.080 回答
0

尝试添加 word-spacing 和 letter-spacing 属性：http: //jsfiddle.net/RX7cg/17/

于 2012-06-28T20:11:55.617 回答
0

我发现最好的解决方案是在显示为 inline-block 的元素的父元素上声明 font-size:0。

于 2013-05-03T17:06:39.387 回答