0

今まで気づかなかった奇妙な問題に直面しています。次のコードがあります。

<div class="feedback">
  <span> Was this helpful?</span>
  <ul>
    <li>
      <a href="#">Yes</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
  </ul>
</div>

非常に単純なコード ブロック。2 番目の no は無視してください。文字通り、liこれを理解するために 3 番目の 1 を与えるだけです。さて、ここにCSSがあります...

div.feedback {
  position: relative;
}
span {
  float: left;
}
li {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-left: 1px solid #000
}

さて、ここで何が起こっているのですか：

ボーダーレフト

どこからともなく余分な間隔ができているのがわかりますか? 私はそれをテストするためだけに移動しましborder-rightたが、さらに一貫性のない結果が得られました:

ボーダーライト

これで、3 番目の LI は 0paddingとmarginになりました。残りの2台はまだ空きがあります。

最後に、ブラウザは適切なheightand width、liおよび属性 nomarginまたはpaddingto it を理解します。ブラウザによると、私も期待しているように、テキストは境界線にぶつかるはずです。

ブラウザ わからない

テキストの右側にあるこの余分な 3 ～ 5 ピクセルの間隔について誰か説明してもらえますか?

4

3 に答える 3

2

これは、HTML では改行がスペースとして扱われるためです。内部要素を に指定しましたinline-block。これは、それらの間にスペースが表示されることを意味します。

次のいずれかを実行できます。

  1. 親の font-size を 0 に設定してから、 で通常に戻します<li>。
  2. s間の改行を削除するだけ<li>です。

3 番目の (より少ない) オプションが存在します。それは の使用ですfloat。

floatもともとは、要素をコンテナーの端に押し込み、その周りにテキストを自由に流せるようにすることを目的としていました (新聞の画像のように)。この機能はレイアウトにも利用され、ブロック レベルの要素が水平方向に積み重ねられることが発見されました。

を使用すると、 clearfixを使用するか、要素を設定して、自分自身を後回しにfloatする必要があることを意味します。clearclear: both

このオプションは、表形式のレイアウトと同様に の本来の目的ではないため、より少なくなりますfloat。実装はブラウザ間や期間によって異なる場合がありますが、最も重要なのは、クリアのオーバーヘッドの問題が追加されることです。display: inline-block（だから、あなたがそれを助けることができるなら、固執してください！）

于 2012-12-04T20:46:43.357 に答える
0

どこかにdisplay:inline-blockがあります。

インライン ブロック表示は次のように動作します。コード内のスペースと改行をスペースとして表示します。

HTML 内のスペースと改行を手動で削除するか、表示を別のものに変更する必要があります。

于 2012-12-04T20:50:26.233 に答える
0

コード内の空白が原因です。このjsFiddleの例を参照してください

<div class="feedback">
  <span> Was this helpful?</span>
  <ul>
    <li>
      <a href="#">Yes</a>
    </li><li>
      <a href="#">No</a>
    </li><li>
      <a href="#">No</a>
    </li>
  </ul>
</div>​
于 2012-12-04T20:45:24.477 に答える