divブロック内に2つの異なるulがあり、同じ系統列を表示するCSSが効果オーバーフローしない

Question

テーブルのように2つの異なるulと列のような各リスト要素をリストしたい。私はそれをしましたが、私がx行で学校を卒業したときにCSSが効果を発揮しませんでした。

第2 UL 4および第1 UL 4は、背景色には影響しません。

ul { 
 
    padding: 5px; 
 
    background-color: red; 
 
    display: block; 
 
    white-space: nowrap; 
 
} 
 

 
li { 
 
    width: 33%; 
 
    display: inline-block; 
 
} 
 

 
.dataBlock { 
 
    overflow-x: auto; 
 
    width: auto; 
 
}

<div clas="dataBlock"> 
 

 

 
    <ul> 
 
    <li> first UL 1 
 
     <li> first UL 2 
 
     <li> first UL 3 
 
      <li> first UL 4 
 
      <li> first UL 5 
 
    </ul> 
 
    <ul> 
 
    <li> second UL 1 
 
     <li>second UL 2 
 
     <li>second UL 3 
 
      <li>second UL 4 
 
      <li> second UL 5 
 
    </ul> 
 
</div>

Answer 1

あなたは、各liの終わりに</li>が欠落していて、フレキシボックス

.dataBlock { 
 
    overflow-x: auto; 
 
} 
 

 
ul { 
 
    padding: 5px; 
 
    background-color: red; 
 
    display: flex; 
 
    min-width: 200%; 
 
    list-style: none 
 
} 
 

 
li { 
 
    flex: 0 33%; 
 
}

<div clas="dataBlock"> 
 
    <ul> 
 
    <li> first UL 1</li> 
 
    <li> first UL 2 </li> 
 
    <li> first UL 3 </li> 
 
    <li> first UL 4 </li> 
 
    <li> first UL 5</li> 
 
    </ul> 
 
    <ul> 
 
    <li> second UL 1</li> 
 
    <li>second UL 2</li> 
 
    <li>second UL 3</li> 
 
    <li>second UL 4 </li> 
 
    <li> second UL 5</li> 
 
    </ul> 
 
</div>

を使用して所望の効果を達成することができます