经过一些研究,我仍然找不到我要找的东西,我想确保我想要的东西是可能的。
对于站点地图页面,我有链接列表,每个链接都在 h3 标签下,但不希望列表在两列之间拆分。
有什么线索吗?
谢谢
CSS
.info-col{
max-width:720px;
columns:350px 2;
-webkit-columns:350px 2; /* Safari and Chrome */
-moz-columns:350px 2; /* Firefox */
}
.info-blob{
}
HTML
<div class="info-col">
<div class="info-blob">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Aliquam tincidunt mauri</a></li>
<li><a href="#">Nunc dignissim risus id</a></li>
<li><a href="#">Cras ornare tristique</a></li>
<li><a href="#">Vivamus vestibulum nulla</a></li>
<li><a href="#">Praesent placerat risus</a></li>
</ul>
</div>
<div class="info-blob">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Nunc dignissim risus id</a></li>
<li><a href="#">Cras ornare tristique</a></li>
<li><a href="#">Vivamus vestibulum nulla</a></li>
<li><a href="#">Praesent placerat risus</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Aliquam tincidunt mauri</a>
<ul>
<li><a href="#">Nunc dignissim risus id</a></li>
<li><a href="#">Cras ornare tristique</a></li>
<li><a href="#">Vivamus vestibulum nulla</a></li>
<li><a href="#">Praesent placerat risus</a></li>
</ul>
</li>
</ul>
</div>
<div class="info-blob">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Aliquam tincidunt mauri</a></li>
<li><a href="#">Nunc dignissim risus id</a></li>
<li><a href="#">Cras ornare tristique</a></li>
<li><a href="#">Vivamus vestibulum nulla</a></li>
<li><a href="#">Praesent placerat risus</a></li>
</ul>
</div>
<div class="info-blob">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Vivamus vestibulum nulla</a></li>
<li><a href="#">Praesent placerat risus</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Aliquam tincidunt mauri</a></li>
<li><a href="#">Nunc dignissim risus id</a></li>
<li><a href="#">Cras ornare tristique</a></li>
<li><a href="#">Vivamus vestibulum nulla</a></li>
<li><a href="#">Praesent placerat risus</a></li>
</ul>
</div>
</div>
最佳答案
在 .info-blob
上使用 column-break-inside
:
.info-blob {
-webkit-column-break-inside : avoid;
-moz-column-break-inside : avoid;
column-break-inside : avoid;
}
作为替代方案,如果您希望它是跨浏览器的,请将您的 CSS 替换为:
.info-blob {
display: inline-block;
}
关于html - CSS 阻止列表在列之间拆分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23912502/