display:inline-block产生的间隙问题

最新推荐文章于 2022-12-12 18:09:00 发布
最新推荐文章于 2022-12-12 18:09:00 发布
阅读量865 收藏
点赞数
分类专栏： 切图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zchcode/article/details/38312265
版权 
.top{ height:35px; line-height:35px; margin-bottom:40px; background:#000; opacity:0.7;}
.top a{ display:inline-block; width:25%; text-align:center; color:#fff; *margin-right:-2px;}
.top a:hover{ color:yellow;}


<div class="top">
	<a href="index.html">返回首页</a><a href="use.html">如何使用</a><a href="effect.html">基本效果</a><a href="demo.html">Demo</a>
</div>

a标签写成一排是为了兼容火狐

*margin-right是为了兼容ie7


ie67891011 火狐 谷歌测试通过


PS：使用display:inline-block来实现这种并排效果的话就这样写，如果嫌麻烦还可以使用浮动来解决。

太羽
关注
专栏目录
【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1265
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
css解决display:inline-block;产生的缝隙（间隙）
codingWeb的博客
07-13 4782
display：inline-block的缝隙 <style type="text/css"> *{ border: 0; padding: 0; margin: 0; } ul li{ display: inline-block; border: 1px solid #000000; } </style...
display:inline-block引发的间隙问题解决办法
weixin_30609331的博客
10-12 308
在网页布局中我们经常会用到display:inline-block;好处是：能够将块状元素按照内联元素的方式布局，同时能设置宽高。个人感觉很好用，可是用多了慢慢的问题就来了？ 1.display:inline-block;在IE6/7中不兼容 解决办法：display:inline-block;*dsiplay:inline;*zoom:1; 2.display:inline-block;会...
诡异的间隙inline-block
TimeToBeWinner
08-14 329
最近在学习如何制作导航条，并不太喜欢使用float这种方法，因为带来的副作用有点大。毕竟float出现的本意是为了解决文字浮动的效果。所以我选择使用inline-block来让竖直的li列表变成水平状。 所以，问题产生了。<style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } li{ background-co
怎么解决 display:inline-block 之间显示间隙问题？
liayn523的博客
08-04 726
1.移除空格（div之间回车）； 2.使用margin负值； 3.使用font-size：0； 4.letter-spacing; 5.word-spacing;
两个inline-block元素靠近为什么有间隙？
CRMEB小程序商城的博客
03-28 1811
前言 相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧 一、问题描述 废话不多说,上图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
css div等块元素设置display:inline-block存在间隙问题
ScottePerk的博客
12-12 1920
需要重新设置子元素的font-size。而且会出现下面元素下移的情况。**也会出现元素下移的情况。只是每个子元素都要设置float，有一点点麻烦。如果设置inline-block后，又设置float，还是会有空格。也就是这里的间隙实际上是来自div和div之间的换行转变成空格导致的。可以包裹一个空的父元素，就为了解决这个问题。我们给块元素例如div设置display:inline-block，会发现元素之间存在空隙。父元素里面的内容也是会影响。可以包裹一个空的父元素，就为了解决这个问题。
display:inline-block的使用示例
09-25
在给定的示例中，我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。 在传统的多列布局中，我们通常使用`float:left`来实现元素并排显示。然而，这种方法存在一个问题，即如果父容器的宽度小于...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
首先，缝隙的产生是因为HTML源代码中的空白字符（空格、制表符等）在解析时会被浏览器视为一个空格，而`display: inline-block` 的元素会将其视为内容的一部分，从而在元素间产生间隙。为了解决这个问题，我们可以...
css之display属性之inline-block布局实现详解
11-21
- **间隙问题**：在`inline-block`元素之间有时会出现4像素的间隙，这是由于换行产生的空白字符导致的。 - **去除空隙的方法**： - 对父元素设置`font-size: 0`，这样空白字符的大小也会变为0，消除间隙。 - ...
inline-block布局产生间隙的原因及解决办法（水平、垂直）
热门推荐
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
display:inline-block;会产生间隙，以及解决办法
weixin_42262436的博客
06-05 5947
在前端页面布局中，经常用到display：inline-clock；方便布局，能够将块状元素按照内联元素的方式布局，同时能设置宽高。但是，经常写代码的朋友会发现，会产生间隙，间隙产生的原因是因为，换行或空格会占据一定的位置。所以我们的解决方案如下：1，在html代码中除去当前元素的空格或换行；    但是，这样代码的美观度，可阅读行降低，不可行2，当前元素的父元素中设置font-size:0;  ...
解决display:inline-block 出现的间隙
10-09 7533
是把父ＤＩＶ加上：font-size:0; 他的作用便是让多余的空白符消失，当然这会造成所有子元素的文本都一同消失，因此你需要再在子元素加一个font-size:12px。
display:inline-block的间隙问题和解决办法
weixin_30898109的博客
09-27 338
1、display:inline-block在水平方向的间隙； 代码如下： <style type="text/css"> *{margin:0; padding:0;} .test{width:600px; border:1px blue solid;} .test div{width:100px; height:100px; displ...
区别块级和行内，以及opacity\visibility\display:none
苏苏的博客
10-26 177
区别块级和行内，以及opacity\visibility\display:none前言一、块级元素与行内元素1、块级元素与行内元素的区别通过设置display时块级与行内转换二、opacity、visibility、display：none1.opacity：0 不透明度2.visibility=hidden 元素不可见3.display:none 显示总结 前言 区别块级元素与行内元素区别和相互怎么转换，还有隐藏元素时用到的三个不同属性的区分，各自有什么不同 提示：以下是本篇文章正文内容 一、块级.
display:inline-block引发的间隙思考
weixin_33874713的博客
06-26 127
一、导火线 没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，...
display为inline-block的元素中间有间隙的原因和解决办法
my466879168的博客
03-11 3074
display为inline-block的元素在水平方向上之间会有间隙 原因：标签与标签之间使用了空格或者是换行符(空白字符也是字符，样式会影响) 解决办法一： 不使用空白符号，使用注释替代换行、标签的结束标签与开始标签写在一起等（代码的可读性较差） 解决办法二：设置父元素的font-size为0，子元素重新设置字体大小（增加了代码量） 解决办法三：使用负的margin-left（空隙是由上下文...
关于HTML中div从display:none到display:block透明度渐增显示的实现
战五渣
09-07 1万+
在编写前端页面的过程中，经常会遇到将鼠标移至链接或li上时显示div的需求。如图： 而在这过程中，为了有更好的用户体验，通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现： （1）在HTML中编写页面代码，并在CSS中设置要弹出的div显示display:none； HTML：
display inline-block 水平间隙问题
Abudula__的博客
08-13 2117
我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下： &lt;div class="nav"&gt; &lt;div class="nav-item"&gt;&lt;a&gt;导航&lt;/a&gt;&lt;/div&gt; &lt;div class="nav-item"&gt;&lt;a&a
display:inline-block什么时候会出现间隙
最新发布
05-17
在使用display:inline-block时，会出现间隙的原因有以下两点： 1. HTML代码中的空格、换行符或注释等会导致元素之间产生空隙。 2. inline-block元素默认基线对齐，如果元素中有图片或者文字，那么基线会导致元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值