代码之家 › 专栏 › 技术社区 › Mendes

Flex容器未获取其子容器的全宽度[重复]

css html

Mendes · 技术社区 · 4 年前

考虑以下简单的flex网格:

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.container:hover {
  background-color: orange;
}

.child {
  display: flex;
  padding: 4px;
  flex: 1;
  height: 24px;
  border: 1px solid grey;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

container:hover 穿过整条线。修复橙色悬停线不够大,无法悬停到所有子对象(向右滚动可查看效果)。

如何制作 container children ?

2 回复 | 直到 4 年前

focus.style 4 年前

问题是 .容器

更新你应该把家长改成并移除 宽度:100%;

.container {
  display: inline-flex;
  flex-direction: row;      
}

.container:hover {
  background-color: orange;
}

.child {
  display: flex;
  padding: 4px;
  flex: 1;
  height: 24px;
  border: 1px solid grey;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

m1ck 4 年前

如果希望悬停覆盖所有子对象,则应将其应用于子对象:

.container:hover .child {
  background-color: orange;
}

注意:这将修复您想要修复的内容,但是直接使容器得到其子容器的宽度。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前