基于display:inline-block 的列表布局

最新推荐文章于 2025-08-29 15:56:14 发布
转载 最新推荐文章于 2025-08-29 15:56:14 发布 · 489 阅读 · 2

本文探讨了不同浏览器中display属性设置为inline-block的元素产生的换行符间隙问题，并提供了多种解决方案，包括设置font-size为0及使用negative letter-spacing。

要点总结

1 display为block水平的元素Inline-block化后，IE6/7没有换行符间隙问题，其他主流浏览器均有。

2 display为inline水平的元素inline-block化后，所有主流浏览器都有换行符/空格间隙问题。

3 font-size为0，IE6/7会有1像素的间隙残留，chrome浏览器没有解决间隙问题，其他主流浏览器都没有换行符/空格间隙问题。

4 letter-space为负值可以去除所有浏览器的换行间隙问题，但是Opera浏览器下极限是1像素，0像素会反弹，换行符间隙还原。

<div style="font-size:0;letter-spacing:-4px;">
    <span style="display:inline-block;">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511153570199&di=e8c0172cea273c7efc1a30aa41b26529&imgtype=0&src=http%3A%2F%2Fbcs.91.com%2Frbpiczy%2FWallpaper%2F2015%2F1%2F9%2Fd4b1ade76d3549bdbd94937201a32c0d-9.jpg" style="width:200px;">
    </span>
    <span style="display:inline-block;">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511153570199&di=e8c0172cea273c7efc1a30aa41b26529&imgtype=0&src=http%3A%2F%2Fbcs.91.com%2Frbpiczy%2FWallpaper%2F2015%2F1%2F9%2Fd4b1ade76d3549bdbd94937201a32c0d-9.jpg" style="width:200px;">
    </span>
</div>

链接文章地址

点击打开链接



CSS属性display:inline-block用法深入理解
09-25
对于块级元素，直接设置`display:inline-block`无法达到预期效果，因为它们已经是行内布局。要让IE支持`inline-block`效果，有以下两种常见的解决方案： 1. 使用双`display`属性技巧：先设置`display:inline-block`...
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
CSS之使用display:inline-block来布局
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
display:inline-block列表布局
Jin's blog
06-21 1949
 使用浮动进行列表布局时，需对每个li设定高度，否则当内容高度不一时容易产生错位。使用display:inline-block进行列表布局时，无需设定固定高度，一行的高度以其中最大高度项为准，根据内容的不同，各行的高度可能不一样。IE6和IE7不支持display:inline-block,可以设置display:inline，再设置zoom:1触发haslayout来解决。样式：ul
关于 display: inline 、block 、inline-block
deadswan000的专栏
09-26 463
block元素的特点是：1N-u4T#@BT BrL0总是在新行上开始；中国经济网 经济博客+N/wl Z0V8z D&_高度，行高以及顶和底边距都可控制；,lrDM!P.A0宽度缺省是它的容器的100%，除非设定一个宽度中国经济网 经济博客MZw#VpU9U, , , , 和是块元素的例子。0vXy:oF rvL0中国经济网 经济博客
display:inline-block的深入理解
dianzongfan5428的博客
07-31 179
转自：淘宝 怿飞在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏...
CSS display: inline-block；
qq_41045651的博客
07-06 9952
这意味着元素会在一行上显示，并且可以设置宽度、高度、内外边距等属性，同时仍保留内联元素的特性，可以与其他元素在同一行内显示。是一种常用的 CSS 属性，用于将元素以内联块级元素的方式显示，使其具备块级元素的特性，并在一行内与其他元素共享空间。元素可以在一行内显示，并且可以与其他元素共享一行，适用于需要结合文本或其他内联元素进行布局的情况。元素不会独占一行，而是根据其内容的宽度来决定自身的宽度，可以在一行内与其他元素并排显示。元素可以设置宽度、高度以及内外边距等属性，使其具备块级元素的特性。
display:inline-block的原理分析
09-25
`display:inline-block` 是 CSS 中的一个重要属性，用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、...
浅谈display：inline-block
热门推荐
bigboom_的博客
04-23 2万+
css之display:inline-block布局 先写几个常用的display布局方法 1.display：none 用来在不删除元素的情况下隐藏或显示元素。 它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。 2.display：block 块级元素 通常可以用来搭配display：none来实现元素的显示或隐藏，也可以作为块级元素来使用，使元素独占一行 3.displ
CSS属性display:inline-block;实现列表布局
javaloveiphone的专栏
03-18 1255
1、先说一下列表浮动布局列表浮动布局：指通过使用float属性，让列表元素依次排列的布局（通常是左浮动，float:left）。这是相当常见的也是目前最最主流的列表布局方式。列表浮动布局的局限性：每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐。举例说明：如新浪微博，其
css之display:inline-block布局和浮动布局对比
wordpython
02-23 2385
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display:inline-block和float
shenjiu2323的博客
03-18 264
我们在制作导航栏等效果时可能会用到这两个属性一，使用浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框的padding或另一个浮动框的为止。同时浮动框的display会变成inline-block（无论本身是块框还是行内框）的形式，此时它可以设置宽高等,并且不会产生由空白节点造成的间距注意：使用float时要注意清除浮动，以免父元素高度塌陷。二，使用display:inline-block可...
display:inline-block之用法
weixin_30642561的博客
07-31 257
HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。有些HTML元素自然地带有display:block;样式属性，比如<div><h1>...<h6><p>...
CSS定位与布局
qq_72013756的博客
08-25 5488
从零开始学前端
display:inline-block详解
deng131的专栏
05-23 1134
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度...
display属性详解及用法
橘猫吃不胖的博客
11-06 1万+
display属性详解 1 block、inline、inline-block 2 flow-root 3 table、inline-table 4 flex、inline-flex 5 none 6 list-item 7 contents 8 grid、inline-grid
CSS-display属性【看这一篇就够了！！】
zheshiyangyang的博客
08-27 3830
块级元素行内元素行内块元素互相转换和对比隐藏元素空白间隙。
display的block、inline和inline-block的区别
最新发布
xiaoxin_040112的博客
08-29 1642
本文详细解析了CSS中display属性的三种常见值：block、inline和inline-block的区别。block元素独占一行，可设置宽高和所有边距；inline元素同行显示，不能设置宽高，垂直边距无效；inline-block兼具两者特点，可同行显示且能设置宽高和完整边距。文章通过具体示例展示了三者的实际表现，并提供了常见使用场景指导，帮助开发者根据布局需求选择合适的display属性值。
display: inline-block
05-06
### CSS `display: inline-block` 的用法及常见问题 #### 一、基本概念 `display: inline-block` 是一种用于控制 HTML 元素显示方式的 CSS 属性值。它结合了 `inline` 和 `block` 显示模式的特点，使得元素既可以在同一行内排列，又能设置宽度和高度等块级属性[^1]。 - **Inline 特性**: 元素与其他内联元素并列显示在同一行内。 - **Block 特性**: 可以定义宽高、内外边距以及边框等样式。 #### 二、语法结构 以下是使用 `display: inline-block` 的基础示例： ```css span { display: inline-block; width: 100px; /* 设置宽度 */ height: 100px; /* 设置高度 */ padding: 5px; /* 添加填充 */ border: 1px solid red;/* 定义边框颜色 */ background-color: yellow; /* 背景颜色 */ } ``` 通过以上代码，可以看到 `span` 元素被赋予了块状特性和内联特性[^3]。 #### 三、实际应用场景 1. **创建水平导航菜单** 利用 `display: inline-block`，可以让多个 `<li>` 元素保持在一行的同时支持尺寸调整。 ```html <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> <style> ul li { display: inline-block; margin-right: 10px; padding: 5px 10px; border: 1px solid black; font-size: 12px; } </style> ``` 这种方法相比传统的浮动布局更加直观且易于维护[^2]。 2. **实现自适应列表布局** 当需要构建响应式设计中的网格系统时，可以通过 `display: inline-block` 来动态分配空间给子项。 ```css .item { display: inline-block; width: calc(25% - 20px); /* 减去间距部分 */ margin: 10px; text-align: center; vertical-align: top; } ``` 此外还可以配合媒体查询进一步优化不同屏幕下的表现效果[^5]。 #### 四、常见问题及其解决方案 1. **垂直对齐问题** 默认情况下，`vertical-align` 属性会影响 `inline-block` 元素的位置，默认值为 baseline (基线)，这可能导致视觉上的错位现象。建议显式指定其他合适的选项如 middle 或 top 解决此情况。 ```css div.inline-block-element { display: inline-block; vertical-align: middle; /* 改善对齐方式 */ } ``` 2. **空白间隙处理** 在 HTML 中连续两个标签之间若有换行符或者空格，则渲染后的页面会出现额外的空间间隔。消除这些不必要的缝隙有多种办法： - 将父容器字体大小设为零再恢复子节点正常状态； - 删除HTML源码里的多余空隙字符； - 应用负margin来抵消影响等等[^4]。 3. **跨浏览器兼容性注意事项** 大多数现代主流浏览器均良好支持 `display: inline-block` ，但在某些老旧版本 IE 下可能存在局限性需特别留意测试验证结果。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值