Overflox-x 不起作用

Question

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;
 }

Answer 1

在.navigation-buttons上指定position: absolute;会将该块从正常的页面流中取出，因此其宽度实际上不包含在navigationbar中，因此没有溢出。

您可以删除位置:绝对，并做一些事情，如设置一个margin-left: 29.9%代替。

Answer 2

如果你想为你的标题做一个滚动条，那么问题是目前你的导航按钮的宽度设置为800px，他们没有超过这个宽度。

如果你将按钮的宽度设置为小于当前的集合边界框宽度，那么你将得到一个带有当前代码的滚动条。

示例: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;
}