主页 / 问题 / 621787
Accepted
Talleyran
Asked:2020-01-31 23:06:47 +0000 UTC2020-01-31 23:06:47 +0000 UTC

带有嵌套浮点数的容器宽度

  • 772

如何使 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 中计算父级的宽度

html

1 个回答

  1. Best Answer

    .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

相关问题