###前提・実現したいこと
サイト1
上記サイトの様な横スクロールするナビゲーションバーをbootstrap3上で再現したいのですが、上手くいきません。
###発生している問題・エラーメッセージ
はみ出た部分が折り返されてしまうか、はみ出た部分が消えてしまいます。
###該当のソースコード
HTML
1 <nav class="scrol"> 2 <div class="mask"> 3 <ul class="list nav nav-tabs" role="tablist"> 4 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">リスト1</a></li> 5 <li role="presentation"><a href="#aircon" aria-controls="aircon" role="tab" data-toggle="tab">リスト2</a></li> 6 <li role="presentation"><a href="#tv" aria-controls="tv" role="tab" data-toggle="tab">TV</a></li> 7 <li role="presentation"><a href="#unp" aria-controls="unp" role="tab" data-toggle="tab">リスト3</a></li> 8 </ul> 9 </div> 10</nav>
CSS
1.scrol { 2 overflow: hidden; 3 height: 3em; /* 可視領域の高さ */ 4 width: 100%; 5} 6 7.scrol .mask { 8 height: 5em; /* 横スクロールする理屈上の高さ */ 9 width: 100%; 10 overflow-x: auto; 11 -webkit-overflow-scrolling: touch; /* 慣性スクロール */ 12} 13 14.scrol .list { 15 display: inline-table; 16 max-width: 100%; 17} 18.scrol .list li { 19 display: table-cell; 20}
###試したこと
参考サイト
CSSでスタイルを上書きしました。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。