时间戳

首页 > 解决方案 > 2 列列表由其标题分隔

html - 2 列列表由其标题分隔

问题描述

我试图获取 h2 及其列表项，但是每次列表计数发生变化时，标题似乎都出现在单独的列中，并且它的列表出现在其他列中是否有任何方法可以将标题与其列表一起卡住？下面是我的代码，

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}
<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

我也尝试用 div 替换父 li，但由于孩子 ul 在 div 之后的不均匀垂直间隙中没有唯一的孩子！是否有任何动态解决方法？（即即使子 li 计数不同，标题也应始终坚持其兄弟姐妹 ul）

标签： htmlcsshtml-lists

解决方案

您可以重置li display为inline-block，因此它不应分成 2 列

演示

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {/*to  avoid li to spray through 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}
<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

最多将它们推入第一列，另一个技巧是在最后一个元素上设置边距，这是一个平均设置，如果内容和大小不是静态的，则不是 100% 可靠，内容必须以某种方式平衡，运行下面的代码片段在整页中并调整宽度以查看平均设置：

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {
  /*to  avoid li to spray through 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}


/* average pusher */
/* only for the show, not wise to use, unless for static and known content */

ul.list-parent> :last-child {
  padding-bottom: 20%;/* or a static value*/
}
<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

推荐阅读