`UL` - 元素具有宽度为'100％' - 还是孩子滴上新的生产线

Question

我div具有有限的width和overflow-x:auto和它的孩子ul有100%的width，还是在新的生产线ul滴孩子。儿童li有float:left属性。我需要li不应该下降。我需要动态添加li。

这里是演示：

*{ 
 
    padding:0; 
 
    margin:0; 
 
    list-style:none; 
 
} 
 

 
.parent{ 
 
    width:300px; 
 
    overflow-x:auto; 
 
    background:green; 
 
} 
 
ul{ 
 
    width:100%; 
 
} 
 
ul li{ 
 
    float:left; 
 
    width:100px; 
 
    height:100px; 
 
}

<div class="parent"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div>

任何一个指导我在这里。

Answer 1

如果你想保留的所有li的上固定宽度的一条线，你可以上使用overflow-x: auto和white-space: nowrapul

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 
.parent { 
 
    width: 300px; 
 
    background: green; 
 
} 
 
ul { 
 
    width: 100%; 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    border-right: 1px solid black; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="parent"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div>