避免在使用列计数时将元素拆分为两列

我正在尝试使用多列创建一组<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属性。 –

避免在使用列计数时将元素拆分为两列

回答

相关问题