Question

我使用div有一些任意嵌套的display: inline-block元素，如下所示：

<div class="div-0">
    <div class="div-1">
        <div class="div-01"></div>
        <div class="div-02"></div>
    </div>
    <div class="div-2">
        <div class="div-01"></div>
        <div class="div-02"></div>
    </div>
    <div class="div-3">
        <div class="div-01"></div>
        <div class="div-02"></div>
    </div>
    <div class="div-4">
        <div class="div-01"></div>
        <div class="div-02"></div>
    </div>
    <div class="div-5">
        <div class="div-01"></div>
        <div class="div-02"></div>
    </div>
</div>

有人在某处隐藏了一个特定的CSS规则：

.div-0 .div-4 .div-01 {
    min-width: 400px;
    width: 100%;
}

这可以防止我的所有div元素的大小小于400像素。我如何追捕哪条规则强制最小宽度？

我已尝试使用Chrome的检查员手动检查每个div，但我的实际代码嵌套了20 + div个元素，并且难以通过检查。

＆＃13;

* {
  box-sizing: border-box;
}

div {
  border: 1px solid red;
  padding: 25px;
  display: inline-block;
  min-width: 100%;
}

.div-0 .div-4 .div-01 {
  min-width: 400px;
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="div-0">
    <div class="div-1">
      <div class="div-01"></div>
      <div class="div-02"></div>
    </div>
    <div class="div-2">
      <div class="div-01"></div>
      <div class="div-02"></div>
    </div>
    <div class="div-3">
      <div class="div-01"></div>
      <div class="div-02"></div>
    </div>
    <div class="div-4">
      <div class="div-01"></div>
      <div class="div-02"></div>
    </div>
    <div class="div-5">
      <div class="div-01"></div>
      <div class="div-02"></div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

转到＆＃39; Computed＆＃39; CSS样式的选项卡。在那里，寻找最小宽度＆＃39;属性。将鼠标悬停在＆＃39; 400px＆＃39;价值，你会看到一个箭头。单击该箭头，它将跳转到强制执行它的CSS规则。

Answer 2

事实证明我问的是错误的问题！我的怀疑是错误的 - 没有开发人员隐藏CSS规则。相反，它是div元素中的一些牢不可破的文本。

div中有一行文字Loremipsum....loremipsum无法正常破坏。 div元素的大小不会小于这个长“单词”的宽度。

更改分词策略解决了我的问题：

div {
    word-break: break-word;
}

哪个div有固定宽度？

2 个答案: