Question

我有以下HTML代码：

<div style="column-count: 3;">
    <ul>
        <li><h3>Education<h3></li>
        <li><a>Education 1</a></li>
        <li><a>Education 2</a></li>
        <li><a>Education 3</a></li>
    </ul>
    <ul>
        <li><h3>Careers<h3></li>
        <li><a>Careers1</a></li>
        <li><a>Careers2</a></li>
        <li><a>Careers3</a></li>
    </ul>
    <ul>
        <li><h3>Legal<h3></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
    </ul>
</div>

它将ul分为3列。以下图片解释了上述代码：

正如您所看到的，Education位于第一列的底部，它看起来很奇怪，因为它的后续锚标记被移动到下一列。在这种情况下，我也希望将Education移到下一列。任何CSS或JS解决方案？

Answer 1

受this post启发的低于语义但有效的解决方案是将每个h3和后面的a包装在一个元素中，然后将它们设置为{{1} }。

我们必须添加一些额外的样式才能使列表出现＆＃34;正常＆＃34;而不是作为嵌套列表，但这将有效地防止标题挂在任何列的底部。如果其中一个包裹display: inline-block的div和紧随其后的h3通常会突破列，则会在其子项上使用a（即display: inline-block和{ {1}}）将阻止这种中断。

＆＃13;

h3

＆＃13;

比较：

＆＃13;

/* the important part */
ul li ul li div h3,
ul li ul li div a {
  display: inline-block;
  width: 100%;
}

/* aesthetics */
ul li ul {
  list-style: none;
  padding-left: 0;
}
ul li ul li {
  list-style-type: disc;
}
div {
  background-color: lightgray;
  max-height: 150px;
}

＆＃13;

<div style="column-count: 3;">
  <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>
      <ul>
        <li>
          <div>
            <h3>Education</h3>
            <a>Education 1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Education 2</a></li>
    <li><a>Education 3</a></li>
    <li><a>Education 4</a></li>
    <li><a>Education 5</a></li>
    <li><a>Education 6</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Careers</h3>
            <a>Careers1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Careers2</a></li>
    <li><a>Careers3</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Legal</h3>
            <a>Legal</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Legal</a></li>
    <li><a>Legal</a></li>
  </ul>
</div>

＆＃13;

（注意：上述代码段解决了您未正确关闭/* the important part */ /*ul li ul li div h3, ul li ul li div a { display: inline-block; width: 100%; }*/ /* aesthetics */ ul li ul { list-style: none; padding-left: 0; } ul li ul li { list-style-type: disc; } div { background-color: lightgray; max-height: 150px; }代码时遇到的问题。）

Answer 2

如果使用bootstrap，则可以将每个列表设置为div，并为每个div分配col-xs-4类。如果没有，您可以模拟网格系统之类的东西。

将<li>移至下一列

2 个答案: