7

私はこのようなレイアウトを持っています：フィドルリンク

マージンとパディングが0に設定されている場合でも、.tdの間に空白があります。

なぜこれが起こっているのですか、そしてこれを修正する方法は？負のマージン-多分残っていますか？またはより良い解決策はありますか？

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div>
    <div class="td" style="width: 50px; background-color: #AAA;"></div>
    <div class="td" style="width: 50px; background-color: #666;"></div>
</div>
4

6 に答える 6

12

解決策1：コメントを追加する：

<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div><!--
    --><div class="td" style="width: 50px; background-color: #AAA;"></div><!--
    --><div class="td" style="width: 50px; background-color: #666;"></div>
</div>

すべてを同じ行に書き込むこともできますが、コメントを付けるとすっきりします。

解決策2：font-size:0親要素に追加します。子要素のフォントサイズを定義することを忘れないでください。

.tr {
  font-size: 0;
}
.td {
  font-size: 15px;
}
于 2012-08-16T07:09:12.650 に答える
2

フロートを使用

.td {
    float: left;
    height: 20px;
    margin: 0;
    padding: 0;
 }
于 2012-08-16T07:06:36.260 に答える
0

インラインブロック要素間のスペース/改行はブラウザによって表示されます。それらを削除することはできますが、tdクラスにある種のフローティングを使用する方がよいでしょう。

マークアップで表示しようとしているデータの種類はわかりませんが、表形式のデータの場合、テーブルの使用は完全に見つかります。;）

于 2012-08-16T07:09:48.580 に答える
0

インラインブロックはインライン要素として扱われるため、親要素の通常の単語として空のスペースで区切られます。

私は2つの解決策を提案します：

  1. 次のように、div間のスペースを削除することで修正できます：http inline-block：//jsfiddle.net/f3AKu/

  2. コンテナのフォントサイズを0に設定して、スペースが目立たないようにすることができます。この方法では、HTMLマークアップを変更せず、CSSルールのみを変更します。例： http： //jsfiddle.net/wC68h/

于 2012-08-16T07:15:40.620 に答える
0

この問題を克服するには、divを1行にまとめる必要があります。

<div class="td" style="width: 50px; background-color: #CCC;"></div><div class="td" style="width: 50px; background-color: #AAA;"></div><div class="td" style="width: 50px; background-color: #666;"></div>

お役に立てれば

于 2012-08-16T07:18:29.920 に答える
0

インラインブロック間のスペースをゼロにするための私の好ましい方法は、CSSで、親がを持ちfont-size:0、子がを持っていることfont-size:16pxでした。そうは言っても、HTMLとCSSでそれを行う方法は他にもいくつかあります。これがライブペンです：

http://codepen.io/chriscoyier/pen/hmlqF

于 2014-12-24T19:02:27.480 に答える