4

Tenha uma div que apresenta dinamicamente uma série de itens agrupados em uma lista horizontal. O elemento pai desta lista tem uma largura máxima definida em meu CSS. É possível fazer com que a largura específica desse elemento pai (<ul>) seja a "soma" da largura dos itens dessa lista (<li>)?

No exemplo há uma base do que quero fazer: minha tag <ul> tem uma largura máxima de 560px. Ainda assim, para não ficar todo esse espaço em branco, queria que a largura fosse até o limite do último li.

ul {white-space:nowrap; overflow-x:auto; overflow-y:hidden; max-width:560px; height:24px; border:2px solid #000; padding:10px}
li {display:inline-block}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

2
  • Cara não entendi direito, se vc quer que tenha a largura exata eh só não colocar largura no ul, e ai não teria sentido o overflow já que ele já teia a largura total dos filho... Eu achei meio confuso de entender o que vc quer fazer...
    – hugocsl
    Commented 8/05/2020 às 11:04
  • @hugocsl Entendo, Hugo. Você está certo. Mas preciso deixar o max-width porque em algumas resoluções precisarei do overflow-x justamente porque a quantidade de itens nesta lista varia e, às vezes, vai exceder o valor definido no max-width. Só que, às vezes, não, por isso a dúvida envolvendo um possível min-width. Desde já, grato pela compreensão, cara!
    – winiercape
    Commented 8/05/2020 às 16:11

1 Resposta 1

3

É só usar as propriedades width:max-content; max-width: 100%; na UL

Assim o box da UL sempre fica do tamanho do conteúdo, e quando o conteúdo for maior que 100% da largura do container par ele da o scroll lateral.

ul {white-space:nowrap; overflow-x:auto; overflow-y:hidden; width:max-content; max-width: 100%; height:24px; border:2px solid #000; padding:20px 0; }
li {display:inline-block; margin: 5px;}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

2
  • 1
    @hugoscl Ótimo, cara! É isso mesmo! Não conhecia esse valor max-content para a propriedade width. Ajudou bastante! Muito obrigado!
    – winiercape
    Commented 8/05/2020 às 19:37
  • @winiercape só não funciona no IE tenha isso em mente..., 0,02 das pessoas :D
    – hugocsl
    Commented 8/05/2020 às 19:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .