0

CSS初心者はこちら。奇妙なことが起こっています、私はリンクの間にギャップがあります、そして私は理由がわかりません。

リセットにhtmlhtml5ボイラープレート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

リンク要素はインラインとしてレンダリングされます。それらに
追加することをお勧めします。これでギャップはなくなります。 例を見る：http：//jsfiddle.net/RX7cg/3/float:left;

于 2012-06-28T19:16:34.080 に答える
0

単語間隔と文字間隔のプロパティを追加してみてください：http：//jsfiddle.net/RX7cg/17/

于 2012-06-28T20:11:55.617 に答える
0

最善の解決策は、インラインブロックとして表示される要素の親要素でfont-size：0を宣言することです。

于 2013-05-03T17:06:39.387 に答える