避免在使用列計數時將元素拆分爲兩列

我正在嘗試使用多列創建一組<a>。但它將一個<a>（Link4）分成兩列。 :( 只需將鼠標懸停在鏈路4。它的某些部分被分割到第二列。:( 是否有任何可能的方式來避免這種情況。避免在使用列計數時將元素拆分爲兩列

div.Nav { 
 
    height: 100% !important; 
 
} 
 

 
div.Nav a.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
div.Nav a { 
 
    transition: 0.5s; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    font-weight: lighter; 
 
    color: black; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    float: none !important; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
div.Nav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
div.Nav a:hover:not(.active) { 
 
    background-color: rgb(56, 62, 50); 
 
    color: #fffd78; 
 
    transition: 0.5s; 
 
} 
 

 
div.Nav div.newspaper { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-rule: 2px grey solid; 
 
    -moz-column-rule: 2px grey solid; 
 
    column-rule: 2px grey solid; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
    <div id="Nav" class="Nav"> 
 
    <a href="javascript:void(0)" class="active"><i class="fa fa-home fa-lg" aria-hidden="true"></i></a> 
 
    <div class="newspaper"> 
 
     <a href="javascript:void(0)" class="show">Link1</a> 
 
     <a href="javascript:void(0)" target="_self">Link2</a> 
 
     <a href="javascript:void(0)" target="_self">Link3</a> 
 
     <a href="javascript:void(0)" target="_self">Link4</a> 
 
     <a href="javascript:void(0)" target="_self">Link5</a> 
 
     <a href="javascript:void(0)" target="_self">Link6</a> 
 
     <a href="javascript:void(0)" target="_self">Link7</a> 
 
     <a href="javascript:void(0)" target="_self">Link8</a> 
 
     <a href="javascript:void(0)" target="_self">Link9</a> 
 
     <a href="javascript:void(0)" target="_self">Link10</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-06-17 Imad Farooque

看起來很好。無法看到任何問題 – Dexter

@Dexter - 嘗試懸停鏈接4。您還可以看到Link5的頂部與Link1和Link8不一樣。 –

@OriDrori我看不出任何問題。對不起！我不是在開玩笑。它在這裏很好。 – Dexter

使用break-inside: avoid;（或等同禮），以防止標籤流入下一列：

div.Nav { 
 
    height: 100% !important; 
 
} 
 

 
div.Nav a.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
div.Nav a { 
 
    transition: 0.5s; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    font-weight: lighter; 
 
    color: black; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    float: none !important; 
 
    display: block; 
 
    text-align: left; 
 
    
 
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ 
 
    page-break-inside: avoid; /* Firefox */ 
 
    break-inside: avoid; /* IE 10+ */ 
 
} 
 

 
div.Nav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
div.Nav a:hover:not(.active) { 
 
    background-color: rgb(56, 62, 50); 
 
    color: #fffd78; 
 
    transition: 0.5s; 
 
} 
 

 
div.Nav div.newspaper { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-rule: 2px grey solid; 
 
    -moz-column-rule: 2px grey solid; 
 
    column-rule: 2px grey solid; 
 
    -webkit-column-gap: 0; 
 
    -moz-column-gap: 0; 
 
    column-gap: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
    <div id="Nav" class="Nav"> 
 
    <a href="javascript:void(0)" class="active"><i class="fa fa-home fa-lg" aria-hidden="true"></i></a> 
 
    <div class="newspaper"> 
 
     <a href="javascript:void(0)" class="show">Link1</a> 
 
     <a href="javascript:void(0)" target="_self">Link2</a> 
 
     <a href="javascript:void(0)" target="_self">Link3</a> 
 
     <a href="javascript:void(0)" target="_self">Link4</a> 
 
     <a href="javascript:void(0)" target="_self">Link5</a> 
 
     <a href="javascript:void(0)" target="_self">Link6</a> 
 
     <a href="javascript:void(0)" target="_self">Link7</a> 
 
     <a href="javascript:void(0)" target="_self">Link8</a> 
 
     <a href="javascript:void(0)" target="_self">Link9</a> 
 
     <a href="javascript:void(0)" target="_self">Link10</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-06-17 10:18:54

非常非常感謝你。工作很好。但它是-webkit-column-break-inside或-wekit-break-inside？使用兩者沒有區別。 –

歡迎。它是'-webkit-column-break-inside：avoid;'。 –

我使用「Sublime Text 3」，它不會將其識別爲css屬性。 –

避免在使用列計數時將元素拆分爲兩列

回答

相關問題