使用inline-block进行列表布局的时候，发现垂直方向上也会有空隙

最新推荐文章于 2021-05-31 18:05:36 发布
最新推荐文章于 2021-05-31 18:05:36 发布
阅读量329 收藏
点赞数
文章标签： inline-block布局 垂直间歇 上下间隙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fan13938409755/article/details/78361422
版权
今天模仿淘宝网站的时候用inline-block布局列表项目，发现大容器的高度总是超出最后一行的边框，把背景色变后才发现每一行列表项目之间有一小段间距。在网上搜索以后逐个尝试，才把问题解决了。就是在每个列表框中加上vertical-align:top属性，那样就不会超出。
范之度
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
inline-block 属性的元素水平方向，垂直方向 间隙问题
sinat_35429840的博客
03-27 385
解决方法 1 垂直方向 ：给父元素添加 font-size:0; 2 水平方向 ：去掉子元素的之间的空格、去掉闭合标签的闭合。
【前端】inline-block元素上浮无法对齐的解决办法
Bryant_2324的博客
02-02 631
元素设置为display:inline-block;后，部分元素出现了上浮，无法与其他同行元素水平对齐。 部分代码如下：  class="wrap">  class="a">iyaxi.com  class="a">雅兮网  class="a">iyaxi.com  class="a">雅兮网 css部分  type="text/css"> *{border: 0;padding:
inline-block布局产生间隙的原因及解决办法（水平、垂直）
热门推荐
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
元素display:inline-block之后水平方向间隙、垂直方向间隙问题
前端小白菜
07-20 518
display:inline-block产生的问题
CSS inline-block与vertical-align的一个问题
10-07 2559
使用inline-block布局时，出现一个问题，当并排的一个li中的div的display设置为none时，其它的li的布局出现问题。花了很久时间找到问题所在，所以记下来。 开始有问题的结果如上图所示，第一个li里的div，也是class为a的元素display设置为none时，原本并排的li出现了错乱。 解决办法时给li加上vertic-align。 inine
深入了解float与inline-block
12-13
在CSS布局中，`float` 和 `inline-block` 是两种重要的布局方式，它们各有特点，且在不同场景下有着不同的应用。本文将深入探讨这两种属性的兼容性、对父元素的影响，以及它们在布局中的差异。 首先，让我们来看...
带你深入剖析inline-block属性值的前世今生
09-25
在使用`inline-block`时，元素之间常常会出现意外的水平空隙，这通常是因为元素间的空白字符。解决这个问题的方法包括： - 将元素间的空格或换行符删除或合并。 - 使用负的`margin`来抵消空隙。 - 使用父元素的`...
Justify:一款实现inline-block元素两端对齐布局的javascript插件(a javascript plug-in implementation inline-block elements full-justified layout)
04-28
元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的，使用inline-block元素，配合text-align:justify，再注意处理好一些细节问题，便可以在现代浏览器上实现两端对齐，但是最后一行的处理却是个...
display:inline、block、inline-block的区别（转的）
08-07
而如果要构建一个响应式的布局，可能会利用`display:block`或`flex`、`grid`等现代布局模式来实现更灵活的布局。 总之，理解并掌握`display:inline`、`display:block`和`display:inline-block`的特性，对于提升网页...
li中插入img图片间有空隙的解决方案
10-25
在网页布局中，我们经常会遇到将`<img>`标签放入`<li>`列表项中进行展示，例如创建一个图片轮播、产品展示等效果。然而，一个常见的问题就是当多个`<img>`标签并排排列时，它们之间会出现意想不到的3像素左右的间隙...
inline-block的上下排列对齐问题
Start -ZJ的博客
08-10 2091
今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。 如图： 具体的H5代码： <div class="modify-rank-install"> <ul> <li class="modify-rank-install-big"><div><p>KKKKKK</p...
盒子模型中padding和margin垂直方向对inline（行内元素）是无效的
caomingwumr8的博客
10-05 755
盒子模型中padding和margin垂直方向指的 padding-top,padding-bottom和margin-top ,margin-bottom，对inline（行内元素）如：,    ,,........等失效的。而img,input,属于inline-block（行内块级元素），行内块级元素和块级元素一样，是受盒子模型中padding和margin垂直方向影响，不失效。
inline-block垂直对齐问题
逆行者
03-29 4504
当给某元素设置display:inline-block属性后，有时会出现垂直对齐问题。解决办法：设置vertical-align: top;图片下边的空白也可以如此解决~
HTML知识点总结还涉及一些subline的基本操作（有很多不足，现为初学者，以后补充）
baobeiduoduo的博客
04-07 263
标题一：HTML课堂笔记 文档结构说明(文档类型声明) 有7种文档类型 HTML4.0-4.1 strict，Transitional， Formset html:xt/xs;对应严谨的或者不严谨的 严谨的HTML文档，可以丢一些东西，浏览器可以识别 XHTML1.0 strict，Transitional， Formset 严禁的HTML文档 所有的标记都要小写 一个符号都不能丢 ...
inline-block容器的高度撑开位置
weixin_34150503的博客
11-26 314
block的高度是从最上面撑开的 那么inline-block呢？ 直接上代码 <!doctype html> <html> <head> <meta charset="utf-8"> <style> #test { line-height: 0; font-size: 80...
inline-block基线对布局的影响&vertical-align&vertical-align等应用
.
10-29 6018
在上一篇博客 http://blog.csdn.net/wmaoshu/article/details/52961394 中介绍了line-height，探讨了行框模型以及行替代元素的空白节点问题。在这一篇中多次强调了在行框中 字母“x”的一半并不是内容区域的一半，这是由“文字下沉”导致的。在将要介绍的这一篇中介绍line-height一个好基友是vertical-align，他俩可以说无论在哪
解决： 排列inline-block元素出现顶部不对齐的问题
Ada Yan
12-22 1779
最近在写有关响应式布局的样式，当用inline-block横向排列li元素时，出现了一个奇怪的问题，就是横向排列的元素上部没有对齐。查找了好多原因，最终在stackoverflow上搜到一篇相关解答，与大家分享下。   问题原链接：http://stackoverflow.com/questions/1885873/vertical-alignment-of-empty-inline-block
inline-block元素之间的空隙的消除方法
吴小粥的博客
10-25 2943
在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示对的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙。元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理。
如何让display: inline-block元素位于最顶端
weixin_42178670的博客
05-31 835
解决方案：给对应元素添加vertical-align: top;
CSS之使用display:inline-block来布局
最新发布
06-10
具体地，我们可以将需要进行布局的元素设置为 `display: inline-block`，然后通过 `vertical-align` 属性来控制元素的垂直对齐方式，再通过 `margin` 和 `padding` 属性来调整元素之间的间距。 例如，下面的代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值