親よりも広いul

Question

私はスライドすることができる「メニュー」を作っています。私の質問は、ulの幅を親divの幅よりも広くしても、liの幅に合わせるにはどうすればよいかです。

私はHTMLとCSSを持つ単純な例作った：

HTML：

<div class="parent"> 
    <ul class="child"> 
    <li>first</li> 
    <li>second</li> 
    <li>third</li> 
    </ul> 
</div> 

をとCSS：

.parent {width:50%;height:50px;background-color:#000;overflow:hidden} 
ul {padding:0px;} 
ul li {width:150px;background-color:#fff;display:inline-block;} 

ここではフィドルです：https://jsfiddle.net/g1pbg5so/

前もって感謝します。

Answer 1

、あなたがしたいすべてが常に関係なく1行に李さんのdivの幅を持っています。

これが事実であるならば、ちょうど

.parent ul { 
    white-space:nowrap; 
} 

更新スニペットを追加：

.parent { 
 
    width: 50%; 
 
    height: 50px; 
 
    background-color: #000; 
 
    overflow: hidden 
 
} 
 
ul { 
 
    padding: 0px; 
 
    white-space: nowrap; 
 
} 
 
ul li { 
 
    width: 150px; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <ul class="child"> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third</li> 
 
    </ul> 
 
</div>

Answer 2

あなたが同じ行にすべてのリスト項目を強制し、彼らの親にスクロールしたい場合：

.parent {width:400px;height:50px;background-color:#000;overflow:scroll} 
ul {float:left;padding:0px; whitespace: nowrap; } 

変更]スクロール」にオーバーフローとパラメータnowrap "にULの折り返しを強制

デモ：私が正しく理解していた場合 https://jsfiddle.net/g1pbg5so/2/