时间戳

首页 > 解决方案 > div 不显示为弹性框

html - div 不显示为弹性框

问题描述

我在尝试使用以下代码创建弹性框的网页中有一个 div：

div.my-div-class {
    display: flex;
    flex-wrap: wrap;
}


div.my-div-class > label {
    fl

最初我遇到了用户代理样式覆盖div并导致它自动显示的问题block。我通过添加以下代码来解决这个问题：

div {
display: inherit;
}

我可能天真地假设这会导致 div “继承”我为类设置的样式。

我检查了控制台，果然看到了：

div { display: inherit; }

而不是以前的用户代理是：

div {display: block;}

这就是我最初认为的搞乱我的风格的原因。

我试图!important看看这是否至少会引起改变，但事实并非如此。

所以我想我不完全理解inherit这个特定的行为或如何div正确地定位它。

有人可以解释一下吗？我应该提到这div是包装在一个表单中，该表单的 HTML 如下所示：

<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>

标签： htmlcss

解决方案

看来您没有复制所有的html代码，因为它看起来像是在中间坏了。

如果你想定位这个特定的 div，你应该通过引用它的类或 id 来实现。属性值“继承”仅从其设置为值的父元素继承属性。

例如：

.parentElement {
  display: flex;
  background: yellow;
  height: 200px;
  width: 100%;
}

.childElement {
  display: flex;
  height: 100px;
  width: 70%;
  background: blue;
}

.childElement:hover {
  height: inherit;
}
<div class="parentElement">
  <div class="childElement">
  </div>
</div>

在此示例中，当我们将鼠标悬停在子元素上时，我们将高度值设置为“继承”，它仅继承高度属性的值，但宽度不会改变。

简而言之：如果您希望您的 div 继承他父母拥有的所有样式，您应该将“继承”设置为它的父母拥有的每个属性的值。

推荐阅读