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列数显示东西混乱

回答

相关问题