クロムとサファリは、項目数が列数と等しい場合、CSSの列を別々に表示します。

Question

CSS列を使用するディレクトリリスティングがありますが、ChromeとSafariでは動作が異なります。ディレクトリの各セクションには、リストを2つの列に並べ替えるラッパーがあります。 Chromeは私が望むようにそれをレンダリングするよう

私はCSSを持っている：

はサファリでは、2列目の最初の項目は、時にはそれ以上の見かけ上の余裕を持っています。

私は、リスト要素にdisplay: inline-block;を追加することで、Safariでこれを修正することができます。これにより、Chromeのレイアウトが分割されます。これは、2つの項目のみが第1列の両方の項目をリストしているためです。

スニペット：

ul { 
 
\t moz-column-count:2; 
 
\t -webkit-column-count:2; 
 
\t column-count:2; 
 
    column-gap: 2em; 
 
} 
 

 
li { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid; 
 
    width:100%; 
 
\t list-style-type:none; 
 
\t padding:10px; 
 
    box-sizing:border-box; 
 
    background-color: #90cdc0; 
 
    margin-bottom: 2em; 
 
}

<h3> 
 
A 
 
</h3> 
 
<ul> 
 
    <li>Anna<p>Sometimes there is additional content</p></li> 
 
    <li>Anya</li> 
 
</ul> 
 
<h3> 
 
B 
 
</h3> 
 
<ul> 
 
    <li>Bartolo <p>Sometimes there is additional content. The boxes are of variable size.</p></li> 
 
    <li>Beatriz</li> 
 
    <li>Benedicto</li> 
 
    <li>Boggins</li> 
 
</ul>

それはそれはすべてのブラウザで正しく表示されるようで、この2列のディレクトリを離れてスタイルすることは可能ですか？

Answer 1

SafariとChromeの少なくとも私はこの問題を解決しました。

これは、アイテム数が列数と等しい場合にのみ適用されるため、display: inline-block;をliに適用して、2番目のリストも最後のリストである場合にオーバーライドします。私の場合は

、解決策は、CSSに追加することです：

li { 
    display: inline-block; 
} 

li:last-child:nth-child(2) { 
    display: block; 
} 

のフルCSS：

ul { 
    moz-column-count:2; 
    -webkit-column-count:2; 
    column-count:2; 
    column-gap: 2em; 
} 

li { 
    display: inline-block; 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
    width:100%; 
    list-style-type:none; 
    padding: 1em; 
    box-sizing:border-box; 
    background-color: #90cdc0; 
    margin-bottom: 2em; 
} 

li:last-child:nth-child(2) { 
    display: block; 
}