2列列表按其标题分隔 [英] 2 column lists gets separated by its heading
问题描述
我试图让h2及其列表项一起使用，但是每次列表计数变化时，标题似乎都出现在单独的列中，而其在其他列中的列表是否有将标题卡在其中的任何方式它的清单? 下面是我的代码，
I was trying to get the h2 along with its list items, but every time the list count varies the header seems to be appearing in separate column and its lists in other column is there any way that the header should be stuck along with its lists? below is my code,
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没有独特的孩子，所以在div之后的垂直间隙不均匀！ 是否有任何动态的解决方法?(即，即使子li计数发生变化，标头也应始终坚持其兄弟姐妹ul)
I also tried replacing parent li's with the divs but as the child ul's doesnt have unique no of childrens there in uneven vertical gap after the divs!! Is there any dynamic workaround?(i.e. even if the child li count varies the header should always stick to its siblings ul)
推荐答案
您可以将li display重置为inline-block，因此它不应分成两列
You can reset li display to inline-block , so it should not break into 2 columns
演示
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％可靠，内容必须以某种方式进行平衡，请在下面全页显示以下代码段并调整宽度大小以查看实际的平均设置:
to push them into first column at the most, another trick is to set a margin on the last element , this is an average setting and not 100% reliable if content and size is not static , content has to be balanced somehow, run snippet below in full page and resize width to see that average setting in action:
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列列表按其标题分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
