如果选项卡的宽度超过页面，则隐藏额外的选项卡。
如果选项卡的宽度超过页面，则隐藏额外的选项卡。
提问于 2016-10-31 10:21:33
我的项目是谷歌模块标签应用程序。我在有限的区域内添加了带有拖放事件的选项卡控件，但下一个要求是我必须限制页面中查看的选项卡的数量。选项卡的计数并不重要。如果它超过页面大小，我必须隐藏额外的选项卡。我该怎么解决这个问题？
在这里，我附加了我的项目输出的快照，但是制表符8和9与第一行分开，移到下一行。我得把他们都排在同一条线上。我怎样才能解决这个问题？有人能给我提个建议吗。
下面是错误输出的快照：
我得把所有的标签都放在同一条线上。如果超出窗口的大小很小，则需要隐藏额外的选项卡。如果窗口大小很大，则所有选项卡都需要对用户可见。
我在HTML文件中将选项卡作为按钮编写：
<div class="limit">
<button data-tab="tab-1" class="button current">Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>我将父容器和按钮元素的CSS属性设置为
parent {
position: relative;
margin: 20px;
width: 800px;
height: 40px;
}
.button {
position: relative;
left: 0;
display: inline;
width: 200px;
height: 75px;
background-color: lightgray;
font-size: large;
border-radius: 4px;
border: 1px solid #ccc;
margin: 0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-o-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-31 10:30:05
试着用这个：
看到弹琴了拖动输出，这是你需要的工作
.limit {
overflow:hidden;
height:75px;
}
.button {
position: relative;
left: 0;
display: inline;
width: 200px;
height: 75px;
background-color: lightgray;
font-size: large;
border-radius: 4px;
border: 1px solid #ccc;
margin: 0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-o-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}<div class="limit">
<button data-tab="tab-1" class="button current">Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40340277
复制相关文章
相似问题
腾讯云开发者
