Как сделать UL в div с горизонтальной прокруткой полной ширины

У меня есть ul в div, который имеет горизонтальную прокрутку. Размер div равен 180px, а элементы в ul больше этого.Как сделать UL в div с горизонтальной прокруткой полной ширины

Эта проблема заключается в том, что 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>

источник

2016-09-23 Chris

Это может помочь вам, проблемы есть с ребенком DIV из .wrapper, установите float:left к нему.

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>

источник

2016-09-23 11:18:55

Это удалит прокрутку, хотя это не решение. – Chris

Еще раз проверьте «сниппет», @Chris –

Это его решает, поэтому добавление 'float: left' исправляет его, спасибо. Вы должны сделать более ясным из своего ответа, какое исправление для любого, кто придет к этому в будущем. – Chris

Вы могли бы применить самоценность ширины width: min-content; к li, как in this fiddle

Однако, вы должны проверить поддержку кросс-браузер от ваших конкретных требований.

Другой способ (example fiddle) может состоять в использовании display: inline-block; на li элементах? Я добавил некоторый запас, чтобы освободить их снова, так как они принимают line-height.

источник

2016-09-23 11:22:19 bbodien

Спасибо, такие работы, но это означает, что 'li' имеют разную ширину – Chris

Я бы представьте, хотите ли вы, чтобы полная поддержка браузера вы лучше всего смотрели на решение js с этим. Кажется, это работает отлично. –

@Chris Я обновил ответ выше с помощью другого возможного подхода. – bbodien

-1

Просто добавьте display: inline-block; в div рядом с .wrapper, чтобы решить эту проблему.

источник

2016-09-23 11:39:58

Как сделать UL в div с горизонтальной прокруткой полной ширины

ответ

Смежные вопросы