html - 我们可以使用 flex 或 block css 属性从 css 进行布局吗？

Question

它从 CMS 自动生成 HTML 并且元素将在 ul 内动态。但我需要像

这样的布局

* {
  box-sizing: border-box;
}

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

.sub-pro li {
  padding: 0 10px 10px;
  display: inline-block;
  vertical-align: top;
  width: 49%;
}

a {
  display: block;
  padding: 10px;
  background: #ccc;
  text-align: center;
  text-decoration: none;
  color: #333;
}

<ul class="pro">
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
      <li>
        <a href="#">Task 2</a>
      </li>
    </ul>
  </li>
</ul>

我怎样才能实现这样的布局。是否可以使用 flexbox 或 float 或 block 从 css 制作？

Answer 1

您可以通过简单地将所有最内层的 ul 和最外层的 li 显示为内联元素来解决这个问题，而无需更改标记。

* {
  box-sizing: border-box;
}

.pro > li, .sub-pro {
  display: inline;                 /*  added  */
}

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

.sub-pro li {
  padding: 0 10px 10px;
  display: inline-block;
  vertical-align: top;
  width: 49%;
}

a {
  display: block;
  padding: 10px;
  background: #ccc;
  text-align: center;
  text-decoration: none;
  color: #333;
}

<ul class="pro">
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2a</a>
      </li>
      <li>
        <a href="#">Task 2a</a>
      </li>
      <li>
        <a href="#">Task 2a</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
      <li>
        <a href="#">Task 2b</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="sub-pro">
      <li>
        <a href="#">Task 2c</a>
      </li>
      <li>
        <a href="#">Task 2c</a>
      </li>
      <li>
        <a href="#">Task 2c</a>
      </li>
    </ul>
  </li>
</ul>