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>