如果标签的宽度超出页面隐藏额外标签

Question

我的项目是谷歌模块标签应用程序。我在一个有限的区域内添加了带有拖放事件的选项卡控件，但下一个要求是我必须限制在页面中查看的选项卡数量。选项卡的数量无关紧要。如果超出页面大小，我必须隐藏额外的标签。我该如何解决这个问题？

这里我为项目输出附加了快照，但是标签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);
}

Answer 1

试试这个：

See the jsfiddle拖动输出。它的工作就像你的需要

.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>