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;
  }

这很好地制作了一个在那个较大的分区中包含五个细分的分区。它目前以具有五个选项的在线形式保存按钮，因此有五个。现在我试图在我的 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

[更新]

使用您的语法，form.cmxform div's css 会影响您更多嵌套的divs.

要访问层次结构中特定级别的子元素，请使用form.cmxform > divand form.cmxform > div > divwith>访问直接后代。

在您的示例中，您需要编写：

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 回答