文章/答案/技术大牛

发布

社区首页 >问答首页 >不能使框水平滚动而不是垂直滚动

问不能使框水平滚动而不是垂直滚动
EN

Stack Overflow用户

提问于 2015-11-30 07:59:42

回答 1查看 63关注 0票数 2

我的这个问题出了点问题...

我正在制作一个网站，在那里用户可以从左到右滚动查看更多详细信息，但只能在特定的框中。它不是水平滚动，而是垂直滚动。我正在使用overflow-x:scroll，但它仍然不能工作。所有的盒子都在float:left里面，但还是。我不能让它工作，这个网站需要尽快完成！！下面是我的代码：

.announce {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 20px);
  padding: 10px;
  height:120px;
  overflow-x:scroll;
}

.section {
  float: left;
  margin:10px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
}

<div class="announce">
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
</div>

任何事情都是值得感谢的。谢谢!

html

css

horizontal-scrolling

vertical-scrolling

回答 1

Stack Overflow用户

发布于 2015-11-30 08:15:57

只需修改div的大小以满足您的需要，然后就可以开始使用了……

.announce {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 20px);
  padding: 10px;
  height: 120px;
  overflow-x: scroll;
  white-space: nowrap;
}

.section {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
  display: inline-block;
  *display: inline;/* For IE7*/
  *zoom: 1;/* For IE7*/
  white-space: normal;
}

<div class="announce">
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
  <div class="section"> </div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33989610

复制

相似问题

问不能使框水平滚动而不是垂直滚动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不能使框水平滚动而不是垂直滚动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不能使框水平滚动而不是垂直滚动
EN