0

Как сделать так, чтобы 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

0

1 ответ 1

1

.tree {
    overflow-x: auto; 
    max-width: 100%;
}
.tree ul {
    margin: 0;
    padding: 0;   
    white-space: nowrap; /* переносы строк в коде HTML игнорируются */
    font-size: 0; /* убираем отступы для display: inline-block;*/
}
.tree ul li {   
    display: inline-block;
    vertical-align: top;
    border: 1px solid gray;   
    font-size: 16px;
}
<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>

1
  • Да, спасибо. Так заработало, только white-space у li еще в normal вернул.
    – Talleyran
    1 фев 2017 в 6:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.