`UL` -

Question

マイdivが限らwidthとoverflow-x:autoを持つ新しい行に低下し、まだ子供が、それは子供たちulは、100%のwidth持つ新しい行にul滴のまだ子供だ - 要素は、` 100％ `として幅を有しています。子供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

あなたは一定の幅で1行にすべてのli年代を維持したい場合は、あなたが1行に `li`幅100pxにしたいul

* { 
 
    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>