タブの幅がページを超える場合余分なタブを隠す

Question

私のプロジェクトはGoogleモジュールタブアプリケーションです。限られた領域内にドラッグ＆ドロップイベントを持つタブコントロールを追加しましたが、次の要件はページ内で表示されるタブの数を制限する必要があることです。タブの数は関係ありません。それがページサイズを超えている場合は、余分なタブを隠す必要があります。これをどうすれば解決できますか？

私のプロジェクト出力用にスナップショットを添付しましたが、タブ8と9は最初の行から区切られ、次の行に移動しました。私はそれらをすべて同じ行に入れなければなりません。どうすればこの問題を解決できますか？誰も私に提案を表示することはできますか？ここで

は、間違った出力のスナップショットです：

私は同じ行にすべてのタブを維持する必要があります。ウィンドウのサイズが小さければ余分なタブを隠す必要があります。ウィンドウのサイズが大きい場合は、すべてのタブをユーザーに表示する必要があります。

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

私はこれを試してみてください

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

として親コンテナやボタンの要素のCSSプロパティを設定しています：

を

私はHTMLファイル内にボタンなどのタブを書きました 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>