水平スクロールでdivにULを作成する方法全幅があります

Question

divには、水平スクロールが適用されているulがあります。 divは180ピクセルで、ulのアイテムはこれより大きいです。

この問題は、ulとliが本来の幅に拡大されず、スクロールが適用された要素の幅があるということです。これは、リスト項目に背景色を適用すると、要素全体をカバーしないことを意味します。

誰もこれを解決する方法を知っていますか？

div.wrapper { 
 
     float: left; 
 
    display: block; 
 
    width: 180px; 
 
} 
 

 
div { 
 
    overflow-x: auto; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
li { 
 
    display: block; 
 
    background: red; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <div> 
 
    <ul> 
 
    <li><h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3></li> 
 
    <li><h3>sdf df sdijr wafl;k wasdlk was</h3></li> 
 
    <li><h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3></li> 
 
    <li><h3>sdf df sdijdsf r wafl;k qwroksal wasdlk was</h3></li> 
 
    <li><h3>sdf df sdijr d df dfswe ef ewf wafl;k qwroksal wdsfdsfasdlk was</h3></li> 
 
    <li><h3>sdf df sdijr wafl;k wasdlk was</h3></li> 
 
    </ul> 
 
    </div> 
 
    </div>

Answer 1

これは、問題を助けるかもしれないことにfloat:leftを設定し、.wrapperの子div要素です。

div.wrapper { 
 
    float: left; 
 
    display: block; 
 
    width: 180px; 
 
} 
 
div { 
 
    overflow-x: auto; 
 
    float: left; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    display: block; 
 
    background: red; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <div> 
 
    <ul> 
 
     <li> 
 
     <h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3> 
 
     </li> 
 
     <li> 
 
     <h3>sdf df sdijr wafl;k wasdlk was</h3> 
 
     </li> 
 
     <li> 
 
     <h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3> 
 
     </li> 
 
     <li> 
 
     <h3>sdf df sdijdsf r wafl;k qwroksal wasdlk was</h3> 
 
     </li> 
 
     <li> 
 
     <h3>sdf df sdijr d df dfswe ef ewf wafl;k qwroksal wdsfdsfasdlk was</h3> 
 
     </li> 
 
     <li> 
 
     <h3>sdf df sdijr wafl;k wasdlk was</h3> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

は、あなたは、あなたの特定の要件に対して、クロスブラウザのサポートを確認する必要があるだろう、しかしin this fiddle

のように、liに固有の幅値width: min-content;を適用することができます。

別の方法（example fiddle）は、li要素でdisplay: inline-block;を使用することがありますか？ line-heightを採用する予定であるため、スペースを取るために余裕をもたせました。

Answer 3

display: inline-block;をdivに追加すると、.wrapperの次に問題が解決するはずです。