如何防止列表中的项目从蔓延到下一列？

Question

我有我想打入列下面的HTML表：

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <li>Placement on Company Offer Marketplace</li>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

这打破了列表为列类：

.comparison-card-list {
  column-count: 3;
  column-gap: 20px;
}    

如果你看着我的Codepen，在一些宽度（如650像素到830px），几个列表项（放置在公司提供的市场为例），溢出到下一列，而不是包装到下一行。

如何强制它换到下一行，而不是蔓延到下一列？

附：每从@Helenesh帮助，这个问题只在Firefox存在。

P.P.S.每Firefox Bugzilla ticket 1525706，该浏览器都允许自由打破了内容，他们请，除非指定page-break-inside: avoid无论怎样规范的状态。

Answer 1

有一个CSS属性来解决这个问题。使用page-break-inside: avoid;您li元素。使用avoid将让您列从“溢出”。

.comparison-card-list > li {
  page-break-inside: avoid;
}

从CSS Tricks：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

Answer 2

这里是一个非常规的黑客我可能会被嘘了。但是，如果它的工作原理它的工作原理。另外，我无法重现您的问题。然而，这可能会解决它为您的任何疯狂的理由。你应该做以下哑巴我修正之前可能测试你的其他设备上的网页。

环绕现场跳一个div和类到另一列。直到你把它修好调整1％的宽度。使用智能修复或修复哑巴。

***智能修复

 li{
    display: inline-block;
 }

***阿呆修复

HTML

<ul class="comparison-card-list">
  <li>Proferssional Photos</li>
  <li>Pricing Guidance</li>
  <li>Listing Descriptions</li>
  <li>Professional Signage</li>
  <li>Market Analysis</li>
  <li>MLS Listing</li>
  <li>Open House Coordination and Hosting</li>
  <li>Manage Showings</li>      
  <div class="fix"><li>Placement on Company Offer Marketplace</li></div>
  <li>Negotiation Assistance, including assessing buyers and their qualifications</li>
  <li>Requisite property disclosures</li>
</ul>

样式

.fix {
 width:1%;
}

Answer 3

有没有那么Flexbox，就解决不了问题！

尝试这个：

https://codepen.io/cloudulus/pen/Nowdaa

.comparison-card-list {
  display: flex;
  justify-content: space-between;
}
.comparison-card-list > div
{
  display: flex;
  flex-direction: column;
  flex-basis: 33.3%;
}
.comparison-card-list > div > div
{
  display: list-item;
  list-style-position: inside;
}

<div class="comparison-card-list">
  <div>
    <div>Proferssional Photos</div>
    <div>Pricing Guidance</div>
    <div>divsting Descriptions</div>
    <div>Professional Signage</div>
  </div>
  <div>
    <div>Market Analysis</div>
    <div>MLS divsting</div>
    <div>Open House Coordination and Hosting</div>
    <div>Manage Showings</div>    
  </div>
  <div>
    <div>Placement on Company Offer Marketplace</div>
    <div>Negotiation Assistance, including assessing buyers and their quadivfications</div>
    <div>Requisite property disclosures</div>
  </div>
</div>