将 <li> 移动到下一列答案

【问题标题】：Moving <li> to next column将 <li> 移动到下一列
【发布时间】：2018-02-05 18:38:54
【问题描述】：

我有以下 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 解决方案？

【问题讨论】：

到目前为止您尝试过什么？有什么代码可以分享吗？
我试过这个 div ul { -webkit-column-break-inside: auto; /* Chrome, Safari, Opera / page-break-inside: auto; / 火狐/ break-inside: auto; / IE 10+ */ margin-top: 0px;边距底部：0px；底部填充：18px；向左飘浮; }
为什么那些都没有关闭？一些从一个
开始，在另一个结束。这是怎么回事？

【解决方案1】：

受this post 启发，一个不太语义但有效的解决方案是将每个h3 和以下a 包装在一个元素中，然后将它们设置为display: inline-block。

我们必须添加一些额外的样式以使列表看起来“正常”而不是嵌套列表，但这将有效地防止标题挂在任何列的底部。如果包装h3 和a 的div 之一在它通常会跨列之后立即包装，则在其子级（即h3 和a）上使用display: inline-block 将防止这种中断。

/* 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;
}

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

比较：

/* 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;
}

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

（注意：上面的 sn-ps 解决了你没有正确关闭 h3 标签的问题。）

【讨论】：

【解决方案2】：

如果您使用引导程序，您可以设置将每个列表放在一个 div 中，并为每个 div 分配一个 col-xs-4 类。如果没有，您可以模拟网格系统之类的东西。

【讨论】：

你确定你可以只用 css 移动一个 html 元素吗？
根据 OP 的要求，他们只关心实际的显示而不是在功能上移动它。 CSS 可以做到这一点。
他们只是要求这个，因为“教育”最终排在列表的底部。
你能将 css 分配给返回的 html 吗？您是否尝试将 display:flex 添加到父 div？