html - div 没有显示为 flexbox

Question

我在网页中有一个 div，我试图使用以下代码来创建一个 flexbox:

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


div.my-div-class > label {
    fl

最初我遇到了用户代理样式覆盖 div 并导致它自动显示 block 的问题。我根据 this question 修复了这个问题通过添加以下代码:

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>

Answer 1

一般来说，你真的不需要定位 div标签，您应该改用类。

如果您要创建自己的 CSS 并且不使用某些库(例如 bootstrap)，那么最好使用 CSS 重置来确保您是在干净的基础上编写 CSS。 This is a popular one .

为了回答您的问题，inherit property 设置一个 css 属性以从其父级继承值。 div默认情况下标记是 block 级元素，因此将任何内容设置为 inherit下面它也会将其设置为 display: block .

只要用类名来定位任何你需要灵活的东西，比如:

.my-div-class {
  display: flex
}