Как сделать так, чтобы ul растягивался в ширину вмещая в себя все вложенные плавающие li в одну линию при том, что их ширина непостоянна и заранее неизвестна (т.е. зависит от контента)?
.tree {
overflow-x: scroll;
max-width: 100%;
}
.tree ul {
margin: 0;
padding: 0;
/*width:2200px*/
}
.tree ul li {
display: block;
float: left;
border: 1px solid gray;
}
<div class="tree">
<ul>
<li style="width:300px">1</li>
<li style="width:400px">2</li>
<li style="width:650px">3</li>
<li style="width:500px">4</li>
<li style="width:250px">5</li>
</ul>
</div>
Хотелось бы обойтись без вычисления ширины родителя на javascript