行內塊空白解決方案
阿新 • • 發佈：2018-12-05
舉下面這個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> nav a { display: inline-block; padding: 5px; background: red; } </style> <body> <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> </body> </html>
效果圖：
接下來將討論如何將圖片銜接在一起。在導航的情況下，它可以避免小的不可點選的間隙。
####一.刪除空格
空格產生原因：在元素之間有空格（一個換行符和幾個製表符被視為一個空格。
解決方案：
<!--法一--> <nav> <ul> <li> <a href="#">One</a></li><li> <a href="#">Two</a></li><li> <a href="#">Three</a></li> </ul> </nav> <!--法二--> <nav> <ul> <li><a href="#">One</a></li ><li><a href="#">Two</a></li ><li><a href="#">Three</a></li> </ul> </nav> <!--法三，推薦--> <nav> <ul> <li><a href="#">One</a></li><!-- --><li><a href="#">Two</a></li><!-- --><li><a href="#">Three</a></li> </ul> </nav>
####二.設定負邊距
nav ul li{
display: inline-block;
margin-right: -5px;
background: red;
}
在較老的瀏覽器有問題，但可保持程式碼格式。
####三.跳過結束標記
<nav> <ul> <li><a href="#">One</a> <li><a href="#">Two</a> <li><a href="#">Three</a> </ul> </nav>
雖然有效，但看著很奇怪。
####四.直接用float實現
ul {
position: relative;
left: 50%;
top: 0;
padding: 0;
margin: 0 auto;
display: block;
float: left;
clear: right;
list-style: none;
background: red;
}
li {
position: relative;
right: 50%;
top: 0;
padding: 10px;
display: block;
float: left;
border: 1px solid black;
}
body {
padding: 20px 0 50px 0;
background: pink;
border: 20px solid white;
}
####五。直接用flexbox實現
nav ul{
display: flex;
padding: 5px;
}
li{
list-style: none;
background: slategrey;
display: inline-block;
/* inline block hack for IE 6&7 */
zoom: 1;
*display: inline;
padding: 4px;
color: white
}