邊框的右下角缺失？

我在列表中的某些項目的左側和右側有邊界，但是我收到了我不想要的這些白色空白，但它只在右側，這很奇怪，我還沒有弄清楚我做錯了什麼。邊框的右下角缺失？

任何幫助將是偉大的。代碼：

ul { 
 
    padding: 0; 
 
    list-style: none; 
 
    background: #f2f2f2; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    line-height: 21px; 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    background: white; 
 
} 
 
ul li:hover { 
 
    border: 1px solid black; 
 
} 
 
ul li:hover ul.dropdown { 
 
    display: block; 
 
} 
 
ul li:hover li { 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
} 
 
ul li:hover li.top { 
 
    border-top: 1px solid black; 
 
} 
 
ul li:hover li.bottom { 
 
    border-bottom: 1px solid black; 
 
} 
 
ul li a { 
 
    display: block; 
 
    padding: 8px 25px; 
 
    color: #333; 
 
    text-decoration: none; 
 
} 
 
ul li a:hover { 
 
    color: #fff; 
 
    background: #939393; 
 
} 
 
ul li ul.dropdown { 
 
    font-size: 14px; 
 
    width: 150px; 
 
    background: #f2f2f2; 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: -1px; 
 
}

<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;"> 
 
    <li><a href="#"><u>Products</u></a> 
 
    <ul class="dropdown"> 
 
     <li class="top"><a href="#">Apples</a> 
 
     </li> 
 
     <li><a href="#">Cans</a> 
 
     </li> 
 
     <li><a href="#">Bowls</a> 
 
     </li> 
 
     <li class="bottom"><a href="#">Cups</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2015-07-03 Trevor

在UL李的風格

border: 1px solid white;

造成額外的白線要繪製

刪除它，你應該是好的

來源

2015-07-03 02:32:10 noveyak

這可以避免這個問題，但那會導致這個問題s頁面上的其他項目移動b/c的邊界使項目更大時，它添加這就是爲什麼我默認情況下有白色邊框。 – Trevor

是的，你是正確的邊界有助於保持項目轉移。如果你願意在物品上保持一定的高度。使用方塊大小：邊框可以很容易地在內部繪製邊框。用示例http://jsfiddle.net/0aao8071/1/添加了一個jsfiddle – noveyak

邊框的右下角缺失？

回答

相關問題