影响布局的inline-block的空白符的问题_html/css

首页

web前端

html教程

影响布局的inline-block的空白符的问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

　　昨天切页面时，进行布局时，想改变以下方法换换口味，所以就抛弃了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">      <strong> <li>li</li><li>li</li><li>li</li><li>li</li></strong>    </ul></body></html><br /><br /><br />

登录后复制

<!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>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<br />

登录后复制

<!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><br /><br />

登录后复制

<!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><br /><br /><br />

登录后复制

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><br /><br />//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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7345

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，