Question

我试图将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之后的孩子ul的孩子在垂直间隙不均匀，所以没有唯一的孩子！是否有任何动态的解决方法？（即，即使子li计数变化，标头也应始终坚持其兄弟姐妹ul）

Answer 1

您可以将li display重设为inline-block，因此它不应分成两列

演示

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>

2列列表按其标题分隔

1 个答案: