要素が重複している固定サイズの行

Question

要素の行を並べ替えるのが最も簡単な方法は、1行に横並びに収まらない場合は、

それは少し、次のようになります。

ul { 
 
    width: 100px; 
 
} 
 

 
li { 
 
    float: left; 
 
}

<ul> 
 
    <li>A</li> 
 
    <li>A</li> 
 
    <li>A</li> 
 
    <li>A</li> 
 
</ul>

が、任意の数の項目を持ちます。この例は最終的にはラップされますが、私は望みません。また、すべてが完全に見えるだけのスペースがあれば、要素が重ならないことが望ましいでしょう。

子要素には画像が含まれ、すべて同じサイズになります。私はデモのためにulをここに使っていますが、何か他のものがうまく機能していれば、私はそれだけです。

Answer 1

完璧ではないが、多分それは正しい方法です：

ul { 
 
    display: table; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    width: 300px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    background: orange; 
 
} 
 
li { 
 
    display: table-cell; 
 
    position: relative; 
 
} 
 
li > div { 
 
    position: absolute; 
 
    
 
    }

<ul> 
 
    <li><div>Content1</div></li> 
 
    <li><div>Content2</div></li> 
 
    <li><div>Content3</div></li> 
 
    <li><div>Content4</div></li> 
 
    <li><div>Content5</div></li> 
 
    <li><div>Content6</div></li> 
 
    <li><div>Content7</div></li> 
 
</ul>

Answer 2

私の心に来る唯一の解決策は、この場合にはフレキシボックスを使用することです。ただ、親ulタグにプロパティdisplay: flex;を追加し、追加どんな子供で何が起こっているかを見る:)

ul { 
    width: 100%; 
    display: flex; 
} 
li { 
    width: 25%; 
}