2

私は投稿全体を見回しており、私のような議論がたくさん見られますが、残念ながら正確な答えはありません. それでは、このケースについて説明し、なぜそれが起こるのか、この奇妙な振る舞いの理由は何なのかをお聞きしましょう.

したがって、親コンテナーと、幅に設定された順序付けられていないアイテム ul のリストを含む非常に単純な HTML ページがあります: 100% で、それぞれが幅: 25% に設定された 4 つの li アイテムで構成されています。私は間違いなくすべての可能なレイアウト プロパティをゼロにリセットしますが、それにもかかわらず、結局のところ、4 つのリスト要素の合計幅は 100% を超えています。私が行ったすべてのリセットにもかかわらず、ブラウザが 4*25% != 100% をレンダリングする理由は何ですか???

コードは次のとおりです。ご回答いただきありがとうございます。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8" />  
<title>Test</title>  
</head>  
<body style="margin: 0; padding: 0; border: 0;">  
<div id="wrapper">  
  <header style="width: 960px;">  
      <nav>  
      <ul style="width: 100%; padding: 0 !important; margin: 0 !important; background-color: yellow; ">  
         <li style="width: 25%; border: 0 !important; background-color: #f00; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#" id="active">Dashboard</a></li>  
         <li style="width: 25%; border: 0 !important; background-color: #0f0; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">Mobiel</a></li>  
         <li style="width: 25%; border: 0 !important; background-color: #00f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">3</a></li>   
         <li style="width: 25%; border: 0 !important; background-color: #f0f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">4</a></li>  
      </ul>  
    </nav>   
  </header>  
</div>      

</body>  
</html>
4

6 に答える 6

6

display: inline-block問題は、プロパティを設定することだと思います。そのため、<li>要素はインライン要素として扱われ、各行間の改行文字は、ブラウザーが「単語」間のスペースとしてレンダリングする空白を導入します。

HTML を変更して、次の行に締めくくりを配置します>。つまり、

<ul style="width: 100%; padding: 0 !important; margin: 0 !important; background-color: yellow; ">  
    <li style="width: 25%; border: 0 !important; background-color: #f00; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#" id="active">Dashboard</a></li  
    ><li style="width: 25%; border: 0 !important; background-color: #0f0; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">Mobiel</a></li 
    ><li style="width: 25%; border: 0 !important; background-color: #00f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">3</a></li   
    ><li style="width: 25%; border: 0 !important; background-color: #f0f; display: inline-block; margin: 0 !important; padding: 0 !important;"><a href="#">4</a></li>  
</ul>

これにより、Firefox の問題が修正されます。

于 2012-12-14T13:54:43.663 に答える
5

LIに配置float:leftすると問題が解決します

li { float:left; }​

これにより、作成された空白が処理されます。

例

http://jsfiddle.net/G3Jxv/

于 2012-12-14T13:52:05.880 に答える
1

<ul> で font-size や line-height を 0 に設定してから、子の <li> 要素でリセットすることもできます。これは、インライン要素の間に自動的にスペースが追加されるためです。

しかし、他のソリューションも機能します

于 2013-02-18T18:41:46.233 に答える
0

CSSを使用して、li要素間の空白を削除することもできます

ul {word-spacing: -1em;
    font-size: 0;
    line-height: 0;
    letter-spacing: -1px;}

li {display: inline-block;
    font: normal 13px/1.3 "Trebuchet MS", Helvetica, sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;}
于 2012-12-14T14:01:40.857 に答える
0

float:left要素を使用して、要素をフローティングしてみることができliます。liまたは、宣言間の空白を避ける必要があります。

<li><a>Test</a>
</li><li>
  ...
</li><li>

このフィドルを見てください

于 2012-12-14T13:57:07.050 に答える