0

cssサブレベルの質問があります。通常、人々は特定のクラスのスタイルを定義しているようです。これは私が始めたものです：

.divholder {
  width:750px;
  border:none
  font-size:12;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  }

 .five {
  width:100px;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  float:left;
  }

これはうまく機能して、その大きなものの中に5つのサブディビジョンを持つディビジョンを作成しました。現在、5つのオプションを備えたオンライン形式のボタンを保持しているため、5つです。ここで、cssファイルで除算を指定しようとしているので、html部分でdiv class="..."を常に定義する必要はありません。これは次のようになります。

form.cmxform div {
  width:750px;
  border:none;
  font-size:12;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  }

form.cmxform div div {
  width:100px;
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  float:left;
         }

仕様は、ChromeとIEでうまく機能するクラスから単純にコピーされます。奇妙なことに、上記のサブ仕様を適用すると、IEでは機能しますが、Chromeでは機能しません。Chromeは、すべての部門を下のコードとは別の行に配置しますが、上のコードは配置しません。なぜこれが当てはまるのか、そしてどうすればそれを解決できるのか、誰かが知っていますか？あなたが持っているかもしれないアドバイスや発言に感謝します！

*これが適用されるhtmlコードを編集するのは次のとおりです。

<li><label>&nbsp;</label><div><div class="five">Zeker Niet</div><div class="five">&nbsp;</div><div class="five">&nbsp;</div><div class="five">&nbsp;</div><div class="five">Zeker Wel</div></div></li>
     <li><label>&nbsp;</label><div><div>--</div><div>-</div><div>0</div><div>+</div><div>++</div></div></li>

divクラスが指定されているトップラインはchromeとIE9の両方でうまく機能しますが、その下の行はIE9でのみ機能し、chromeでは機能しません。

4

1 に答える 1

0

[Updated]

With your syntax, form.cmxform div's css will affect your more nested divs.

To access a specific level of child element on the hierarchy, use form.cmxform > div and form.cmxform > div > div with > accessing the direct descendent.

In your example, you need to write :

form.cmxform li > div {
  display:inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 750px;
}

form.cmxform li > div > div {
  text-align:center;      /* added for style */
  width:100px;
  float:left;
}
于 2013-03-06T14:54:49.350 に答える