0

http://jsfiddle.net/xarq5/

 <div id="hello">
      <ul>
          <li>Hello</li>
          <li>Hello</li>
      </ul>
 </div>

そして、上記のhtmlのcss

  #hello{
     margin:0px;
     padding:0px;
     border:1px solid black;
     float:left;
  }
  #hello ul{
      position:relative;
      display: inline-block;
      list-style:none;
      margin:0px;
      padding:0px;
  } 
  #hello li{
       float:left;
  }

上記のhtmlとcssの場合、ul要素に対して常に5pxのマージンが追加されます。

私のコードから各cssステートメントを1行ずつ注意深く調べ、上記の例を記述した後、問題の原因が原因であることがわかりました。

    display:inline-block;
    or
    display:inline-table;

これを克服するための適切な方法は何ですか？

他のいくつかのフォーラムは使用を提案しています

"親コンテナの場合はfont-size：0;を設定し、子の場合はfont-size：your_size;を設定します。"

フォントサイズ0が子にカスケードされないようにこれを防ぐ他の解決策はありますか？

ありがとうスリカント

4

4 に答える 4

5

に追加vertical-align: middle;する#hello ulと、下部にある望ましくない「パディング」が削除されます。

http://jsfiddle.net/xarq5/1/

デフォルトの垂直方向の配置は通常baseline、です。これは、ディセンダーがない文字の下端を指します（「a」または「B」にはディセンダーはありませんが、「y」または「g」にはディセンダーがあります）。以下のフィドルは、望ましくない「パディング」がどこから来ているのかをもう少し明確にします。パディングではありませんが、テキストの子孫用に予約されたスペースです。

http://jsfiddle.net/xarq5/11/

p {
    border: 1px solid;
}

p.aligned img {
    vertical-align: text-bottom;
}

<p>Something texty <img src="http://placehold.it/50x50" /></p>

<p class="aligned">Something texty <img src="http://placehold.it/50x50" /></p>

問題がinline-block/inline-table要素間で発生する望ましくない間隔であり、ソースを巨大な連続文のように見せたくない場合は、コメントを使用できます。

<ul>
    <li>a</li><!--
    --><li>b</li>
</ul>
于 2013-03-05T17:32:04.637 に答える
1

http://jsfiddle.net/xarq5/10/を試してください

#hello{
    float: left;
}

と

#hello ul {
    float: left
}

説明：他のフローティング要素を含むhtml要素がある場合は常に、それ自体がフローティングでない限り、含む要素はフローティング要素を完全に「含む」ことはありません。

注：この回答とは異なり、HTMLをそのままインデントしておくことができます（つまり、間隔やその欠如について心配する必要はありません）。

<body>   
    <div id="hello">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</body>
于 2013-03-05T17:38:01.100 に答える
0

liスペースが必要ない場合は、マージンやパディングがないように設定してください。のみに設定してみてくださいinline。

于 2013-03-05T17:33:48.433 に答える
0

display: block;要素をul要素に設定display: inline-block;することもできliます。

于 2013-03-13T06:15:33.923 に答える