你的位置:首页 > 网页设计

[网页设计]影响布局的inline


  昨天切页面时,进行布局时,想改变以下方法换换口味,所以就抛弃了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>