div 块内的 2 个不同的 ul 并显示相同的谱系列 css 不影响溢出

Question

我想像 table 一样列出 2 个不同的 ul，每个列表元素都像一个列沿袭。我做到了，但是当我在 x 线上学习时，一些 ul CSS 不起作用（悬停背景颜色）。

第二个 UL 4 和第一个 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> 并且你可以使用 flexbox

达到预期的效果

.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>

div 块内的 2 个不同的 ul 并显示相同的谱系列 css 不影响溢出

2 different ul inside div block and show same lineage column css not effect overflow

html

css

overflow

html-lists