jquery - 如果选项卡的宽度超过页面隐藏额外的选项卡

Question

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

我在这里附上了元素输出的快照，但选项卡 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>