溢出-x 不起作用答案

【问题标题】：Overflox-x doesn't work溢出-x 不起作用
【发布时间】：2014-08-10 05:36:13
【问题描述】：

Overflow-x 在我的导航栏中不起作用。我不知道为什么这不起作用。 http://www.danielvanlier.nl/projectrendionafmaken/

这是我的代码

HTML

<div class="navigationbar">
<div class="navigation-buttons">
  <button class="voordeel">uw voordeel      </button>
  <button class="bieden">wat bieden wij</button>
  <button class="wat">wat doen wij</button>
  <button class="wie">wie zijn wij</button>
  <button class="contact">contact      </button>
</div>
<div class="element logo"></div>
<div class="element background"></div>

CSS

.navigation-buttons {
 position: absolute;
 top: 18px;
 left: 29.9166666666%;
 z-index: 48;
 width: 824px;
 height: 38px;
 }

 .navigationbar {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 49;
 width: 100%;
 min-width: 1200px;
 height: 75px;
 overflow-x: scroll;
 overflow-y: hidden;
 }

【问题讨论】：

标签： html css overflow fixed

【解决方案1】：

在.navigation-buttons 上指定position: absolute; 会使该块脱离正常的页面流，因此它的宽度实际上并不包含在navigationbar 中，因此不会溢出。

您也许可以删除 position:absolute 并执行类似设置 margin-left: 29.9% 之类的操作。

【讨论】：

【解决方案2】：

如果您尝试为标题制作滚动条，那么问题是当前导航按钮上的宽度设置为 800 像素，并且它们没有超过该宽度。

如果您将按钮上的宽度设置为小于它们当前的集体边界框宽度，那么您将获得一个带有当前代码的滚动条。

例如：http://jsfiddle.net/vZ7zZ/

HTML

<div class="navigationbar">
<div class="navigation-buttons">
  <button class="voordeel">uw voordeel      </button>
  <button class="bieden">wat bieden wij</button>
  <button class="wat">wat doen wij</button>
  <button class="wie">wie zijn wij</button>
  <button class="contact">contact      </button>
</div>
<div class="element logo"></div>
<div class="element background"></div>

CSS

.navigation-buttons {
   position: absolute;
   top: 18px;
   left: 29.9166666666%;
   z-index: 48;
   width: 100%;
   height: 38px;
 }


.navigationbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 49;
  width: 100%;
  min-width: 1200px;
  height: 75px;
  overflow-x: scroll;
  overflow-y: hidden;
}

【讨论】：