影响布局的inline-block的空白符的问题
生活随笔
收集整理的這篇文章主要介紹了
影响布局的inline-block的空白符的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
昨天切頁面時，進行布局時，想改變以下方法換換口味，所以就拋棄了float方法，采用了display:inline-block方法，沒想到卻隨之而來的帶來了一個想不通的問題，那就是空白。廢話不多說，上代碼。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">li{ width:50px; height:20px; background-color:#C90; display:inline-block;} </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>效果如上圖所示，每個li之間都會有空格，這影響到我們對頁面的布局。
一、造成的原因
inline-block水平呈現的元素之間，如果有換行或空格分隔，那么元素之間會有間距。
二、解決的方法
1、去除元素間的空白或者換行
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">li{ width:50px; height:20px; background-color:#C90; display:inline-block;} </style> </head> <body><ul class="box"> <li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">li{ width:50px; height:20px; background-color:#C90; display:inline-block;} </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">li{ width:50px; height:20px; background-color:#C90; display:inline-block;} </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">li{ width:50px; height:20px; background-color:#C90; display:inline-block;} </style> </head> <body><ul class="box"><li>li</li><!----><li>li</li><!----><li>li</li><!----><li>li</li></ul> </body> </html>
2、利用margin負外邊距
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">li{ width:50px; height:20px; background-color:#C90; display:inline-block; margin-right:-8px;}//不過這個間距是根據字體的大小來調的，不具有普適性 </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>3、因為空白字符也是字符，所以可以設置父元素的font-size：0，子元素重新定義font-size大小；但是這種方法在Safari中是無效的。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">.box{ font-size:0;}li{ width:50px; height:20px; background-color:#C90; display:inline-block; font-size:12px;} </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>4、使用letter-spacing
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">.box{ letter-spacing:-8px;}li{ width:50px; height:20px; background-color:#C90; display:inline-block; letter-spacing:normal;} </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>//Opera瀏覽器下問題：最小間距1像素，然后，letter-spacing再小就還原了
5、使用word-spacing
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>inline-block的空白符</title> <style type="text/css">.box{ word-spacing:-8px;}li{ width:50px; height:20px; background-color:#C90; display:inline-block; word-spacing:normal;} </style> </head> <body><ul class="box"><li>li</li><li>li</li><li>li</li><li>li</li></ul> </body> </html>轉載于:https://www.cnblogs.com/happyLee/p/5094932.html
總結
以上是生活随笔為你收集整理的影响布局的inline-block的空白符的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NavigationController
- 下一篇： Jquery学习笔记：获取jquery对