CSS列數顯示東西混亂

上面的一個只是一個UL和LI，我已經添加了列數在UL。在懸停<a>標記時，它在第一列顯示一半，在第二列顯示另一半。

我已經試過

display: inline-block; 
display: block;

但我正在逐漸相同的結果。我的代碼如下。

HTML

<ul class="classname"> 
    <li><a href="#">Column 1 - 1</a></li> 
    <li><a href="#">Column 1 - 2</a></li> 
    <li><a href="#">column 2</a></li> 
    <li><a href="#">column 3 - 1</a></li> 
    <li><a href="#">column 3 - 2</a></li> 
    <li><a href="#">column 4</a></li> 
</ul>

CSS

.classname { 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    -o-column-count: 4; 
    column-count: 4; 
} 
.classname li { 
    font-size: 15px; 
    color: black; 
    display: block; 
    margin: 0px; 
} 
.classname li a { 
    display: block; 
    padding: 6px 10px; 
    font-size: 13px; 
    color: #444; 
    letter-spacing: 0.5px; 
}

來源

2017-02-10 Tuku

我認爲你需要玩break-inside: avoid-column;：

.classname { 
 
    -webkit-column-count: 4; 
 
    -moz-column-count: 4; 
 
    -o-column-count: 4; 
 
    column-count: 4; 
 
} 
 
.classname li { 
 
    font-size: 15px; 
 
    color: black; 
 
    display: block; 
 
    margin: 0px; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
} 
 
.classname li a { 
 
    display: block; 
 
    padding: 6px 10px; 
 
    font-size: 13px; 
 
    color: #444; 
 
    letter-spacing: 0.5px; 
 
} 
 
li:nth-child(even) { 
 
    background: teal; 
 
}

<ul class="classname"> 
 
    <li><a href="#">Column 1 - 1</a></li> 
 
    <li><a href="#">Column 1 - 2</a></li> 
 
    <li><a href="#">column 2</a></li> 
 
    <li><a href="#">column 3 - 1</a></li> 
 
    <li><a href="#">column 3 - 2</a></li> 
 
    <li><a href="#">column 4</a></li> 
 
</ul>

來源

2017-02-10 07:45:27 Banzay

CSS列數顯示東西混亂

回答

相關問題