[英]White space between inline-block elements
我覺得這個問題不應該再存在了,但是我似乎找不到解決方法。 所以去。
ul { list-style-type: none; width:150px; } ul.nav_sub_menu > li { width: 100%; } ul.nav_sub_menu > li a { display: inline-block; width: 100%; padding: 2.5px 0px 2.5px 5px; background: #213059; color: white; text-decoration: none; border-bottom: 5px solid #253767; } ul.nav_sub_menu > li a:hover { text-decoration: underline; background-color: #253767; }
<div class="nav_sub_menu_wrapper"> <ul class="nav_sub_menu"> <li> <a href="javascript:void(0)" class="nav_sub_button">About me</a></li><li> <a href="javascript:void(0)" class="nav_sub_button">Goals</a></li><li> <a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li><li> <a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li> </ul> </div>
此示例生成帶有display:inline-block
錨標記的樣式列表。您可能從一開始就注意到,每個列表項之間都用一條水平的白線隔開。 如果沒有,請嘗試放大或縮小瀏覽器(對我而言,可見度為110%)。
空白並不是在所有縮放級別上都可見,並且僅在Chrome中發生,這就是我茫然的原因。 如何開始對此進行故障排除?
僅供參考,我發現此鏈接很有用,但沒有幫助。 我的Chrome版本:
Chrome版本56.0.2924.87(64位)
這是一個奇怪的問題。 我認為這可能與像素分辨率或密度有關。 但是我設法用下面的代碼修復了它。
ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}
ul.nav_sub_menu > li a {
display: inline-block;
width: 100%;
padding: 2.5px 0px 2.5px 5px;
background: #213059;
color: white;
text-decoration: none;
border-bottom: 5px solid #253767;
float: left;
}
ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}
我只添加了float: left;
錨屬性,它刪除了列表項之間的白線。 嘗試一下,看看它對不同的縮放級別有什么作用。 雖然它對我來說可以放大110% 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.