0

同じクラスを共有する 4 つの動的な李を作成しました。しかし、出力では、すべての li の幅が同じではありません。ブラウザで簡単に試すことができます。

なぜこうなった？それを修正する方法は？

body {
  margin: 0;
  padding: 0;
}

.div-nav {
  width: 100%;
  background-color: #CC3399;
  overflow: hidden;
  padding: 0;
}

.ul-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.ul-nav li.space {
  background-color: black;
  width: 0.2%;
  height: 40px;
  margin-right: 20px;
  margin-left: 20px;
  float: left;
  padding: 0;
}
<div class="div-nav">
  <ul class="ul-nav">

    <li class="space"></li>
    <li class="space"></li>
    <li class="space"></li>
    <li class="space"></li>

  </ul>
</div>

4

3 に答える 3

0

私が見ている最大の問題は、それらのliの幅を「0.2％」に指定していることです。これは、コンテンツが含まれていても、黒い実線として表示されます。第二に、あなたは左にあるよりも、li の間の紫が多いという事実についても言及しているかもしれません。これは、左右の余白が 20px に設定されているためです。これは、左端の li が左から 20 ピクセル、左に 20 ピクセルの余白がある次の li の右から 20 ピクセルであることを意味します。基本的に、一番左の li の左に 20 ピクセル、一番右の li の右に 20 ピクセルの余白、およびそれらすべての間に 40 ピクセル (20 + 20) があります。

于 2012-10-01T07:14:36.233 に答える
0

ulにパディングを追加する必要があります

.ul-nav{
    padding-left:20px;
}
于 2012-10-01T07:28:41.377 に答える
0

これは、ブラウザーがどのように計算し、ピクセル全体に丸めるかによるものです。0.2% 幅は ~3.35px 幅を意味します。

(以下はスペースを挟んで計算していませんが、同じように動作します)

  • 最初の li は 3.35px マークで終了する必要があり、3px に丸められます
  • 2 番目の li は 6.70px マークで終了する必要があり、7px に丸められます (4px の差!)
  • 3 番目の li は 10.05 マークで終了する必要があり、10px に丸められます (3px の差)
  • 4 番目の li は 13.40 マークで終了する必要があり、13px に丸められます (3px の差)

このシーケンスをさらに多くの行で続けると、数行ごとに数値が切り上げられることに気付くでしょう。

これを修正する最善の方法は、固定サイズで作業することです。2px や 3px のように。

于 2012-10-01T07:25:01.010 に答える