クロムのCSS列カウントオーバーフロー問題

Question

次のコードを使用して、順序付けられていないリストを2つの列に分割します。これは、クロムを除いて正常に動作します。ここに私のコードは次のとおりです。

.column-list{margin:15px 0 0 0;padding:0;list-style:none;-moz-column-count:2;-webkit-column-count:2;column-count:2} 
.column-list li{margin:0 0 15px 0;background:#fff;border-radius:5px;font-size:120%;line-height:normal;font-weight:700;display:block} 
.column-list a{padding:25px;display:block} 

そして、ここでは、（それが半分に李を分割し、次の列でそれを入れている）何が起こっているのかです：

Answer 1

あなたはあなたの子供要素にbreak-inside:avoidを追加する必要があります。完全に接頭辞は、次のようになります。

.column-list li { 
    -webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 
}