Question

我有以下CSS和HTML：

body { background-color: #c0c0c0; }
.title-bar, { background-color: #999; color: white; float: left; overflow: hidden; }
.title-bar {
  border-bottom: 1px solid white;
  height: 128px;
  width: 100%;
}
.logo, .user-info { box-sizing: content-box; height: 100%; width: 128px; }
.logo{
  align-items: center;
  background-color: #369;
  border-right: 1px solid white;
  display: flex;
  float: left;
  font-size: 2em;
  font-kerning: none;
  justify-content: center;
}
.user-info {
  align-items: center;
  border-left: 1px solid white;
  display: flex;
  float: right;
  justify-content: space-between;
  flex-flow: column nowrap;
}
.user-info .circle {
  border: 2px solid #369;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 32px;
  margin: 8px 8px;
  overflow: hidden;
  transition: border 0.15s ease-out;
  width: 32px;
}
.user-info .circle:hover { border-width: 4px; }
.user-info .container {
  border-top: 1px solid white;
  display: flex;
  justify-content: center;
  margin-top: 6px;width: 100%;
}
.hor-nav { background-color: #404040; }
.option { display: inline-block; position: relative; }
.hor-nav .option:hover {background-color: #369; }
.option a {
  color: white;
  display: inline-block;
  font-size: 1em;
  padding: 14px;
  text-align: center;
  transition: background-color 0.15s ease-out;
}
.option .dropdown { display: none; position: absolute; }
.option:hover .dropdown{ display: block; }
.dropdown a {
  display: block;
  text-align: left;
  width: 100%;
}

<div class="title-bar">
  <a class="logo" href="#">
  </a>
  <div class="user-info">
    <a href="#" class="circle"></a>
    <span>User name</span>
    <div class="container">
      <a href="#" class="circle"></a>
      <a href="#" class="circle"></a>
    </div>
  </div>
  <div class="hor-nav">
    <div class="option">
      <a href="">OPTION 1</a>
      <div class="dropdown">
        <a href="#">ITEM 1</a>
      </div>
    </div>
  </div>
</div>

如您所见，hor-nav栏的颜色会溢出到user-info区域。

我对此进行了研究，发现如果我设置overflow-x: hidden;，则不会执行此操作（请参阅this文章）。

我已尝试过这是真的 - 导航栏没有泄漏到user-info但是，当您将鼠标悬停在其中一个导航栏options上时，dropdown不会下来但是vert-nav会给你一个滚动条（见this jsfiddle）。

此外，如果您执行overflow-y: hidden;，则根本没有滚动条。

我试图让它background-color hor-nav不会溢出到其他div中，但也允许dropdown被激活并正常工作

谢谢。

Answer 1

以最少的代码更改来实现此目的的最简单方法是仅为user-info区域提供背景颜色。由于hor-nav部分在z-index上较低，这将给出您想要的视觉效果，尽管该栏仍然位于user-info部分下方，它似乎不会出现，而下拉列表将会出现问题就像现在一样。

根据您的询问，您可以通过对所有3个元素使用基于百分比的宽度来实现另一种方式，这样它们就不会相互重叠。请参阅此fiddle以了解代码更改（请注意我稍微更改了标记顺序，宽度，并添加了框大小调整css属性）

Answer 2

我看到它的方式，你有3个选项

您可以尝试向hor-nav添加左/右边距。 .hor-nav { margin: auto 128px; }
另一种选择是将某个宽度设置为.hor-nav。或实际上削减它的宽度。 .hor-nav { width: calc(100% - 128px); }
第三，是为.user-info

CSS - 溢出：隐藏到不覆盖下拉列表

2 个答案: