span inline-block模式

最新推荐文章于 2021-11-10 22:03:51 发布
原创 最新推荐文章于 2021-11-10 22:03:51 发布 · 158 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解释了为什么默认情况下为span元素设置宽度属性不会生效，并提供了解决方案：通过使用display:inline-block样式来使宽度属性生效。

span是非block模式

所以默认情况下 style='width:12px;' 这样是不会起作用的

只有增加 display:inline-block 才能生效，而 display:block 就变成div的效果了

呼呼

phoenix_cat
关注
inline-block和block的区别
gao_zhennan的博客
02-24 6099
一、块级元素和内联（行内）元素的特点 块级元素 1. 独占一行 2. 可以设置属性：width、height、margin-top和margin-bottom 内联元素 1. 多个元素在一行显示
inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。
IT修真院：初学者转行到互联网的聚集地
05-13 952
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能，本篇分享的是： 【 inline-block间距产生的原因，去除inline-block间距的方法？及这个问题未来可能的解决方向。】 大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家...
Span元素的 width属性 无效果原因及解决方案
weixin_33862188的博客
01-15 618
先运行下程序看下:<span style='background-color:#336699;width:300px;'>123</span>  输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)width 和 height 只在 IE...
span的宽度失效问题。
Thomas Petrelking 优快云 Blog
01-18 1412
span是非block模式所以默认情况下 style=width:12px;  这样是不会起作用的只有增加 display:inline-block 才能生效，而 display:block 就变成div的效果了呼呼
Span元素的width属性无效果原因及解决方案
12-11
先运行下程序看下: <span xss=removed>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此
span宽度设置无效的解决
chiyi1970的博客
09-30 649
1、float 2、display:inline-block 转载于:https://my.oschina.net/u/1791195/blog/323400
span inline-block问题
weixin_30652879的博客
05-10 314
span设置inline-block后中间有间隙，span之间不要换行，连着写就可以。 转载于:https://www.cnblogs.com/112ba/p/6835982.html
CSS属性display:inline-block用法深入理解
09-25
对于内联元素，如`<a>`或`<span>`，在IE中设置`display:inline-block`虽然表面上看起来有效，实际上这是因为IE触发了"hasLayout"机制，而不是真正理解`inline-block`。对于块级元素，直接设置`display:inline-block`...
css之display属性之inline-block布局实现详解
11-21
`inline`值使得元素作为行内元素显示，这意味着元素会与其他行内元素如`<span>`、`<a>`等共享一行，不会单独占据一行。行内元素的宽度和高度是由其内容自动确定的，无法直接通过设置`width`和`height`来改变。此外...
css几种解决inline-block间隙的方案(整理)
12-02
inline是内联对象，比如<a> 、 <span>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置； block是块对象，比如、标签等，要占一整行，但是宽高可以自定义；为了弥补inline和block的不足，又扩充了inline-...
span的宽度无效 完美解决方案
xiongzhengxiang的专栏
08-18 2904
完美的解决方案 下 面代码的CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度，所以最好将display:inline -block行写在后面，这样在Firefox里面，如果到了未来的Firefox 3，这一行就能起作用，代
span标签 宽度无效解决方案
kodmoqn的博客
07-08 260
span标签 宽度无效解决方案
span设置宽高无效
一个黑曼巴的博客
08-25 3820
因为span标签是行内元素，所以设置宽高无效，需要添加 display: inline-block; 使span变为块元素。设置宽高生效
<span>的高度和宽度没有效果
hongweigg的专栏
08-20 2845
问题： 在HTML页面中设置"&lt;span&gt;"元素的样式，发现设置无效，通过查看其CSS属性值，发现总是为“auto”，即使加上“!important”提高其优先级别也无效： &lt;style&gt; .aclass{ background:#0092d8 url(gantt-images/equals.png); } &lt;/style&gt;...
为什么给span设置宽度不起作用【2021.11.9】
masierty的博客
11-10 3702
因为span是行内元素，而对行内元素设置宽高是无效的且不会自动换行（margin和padding设置上下都无效），知道了这个那解决办法就简单了，将span变为块级元素呗。 等等，如果只是变为块级元素block，会改变你之前的布局，比如自动换行，最好的办法是display：inline-block； 补充一点a标签也是行内元素哦。 ...
span使用inline-block属性的使用，使行内元素成行内块元素
qq_39822451的博客
04-05 1318
<th colspan="8" class="search-bart"> <span style="width:45%;display:inline-block;vertical-align:top;">类型：zz</span> <span style="width:30%;display:inline-block;vertical-a...
span 使用inline-block处理流式布局
u012381782的博客
07-03 322
span 设置inline-block 写文字的span错位
07-21 483
写一个如下图这样排版 设置几个span为inline-block 中间的span写了文字的span错位了 解决方案 给span添加vertical-align: top 转载于:https://www.cnblogs.com/manman04/p/11221749.html...
CSS（五）---CSS标签三种模式：display: block、inline、inline-block
Twelve_Y的博客
04-26 580
CSS标签三种模式 标签显示模式：display：模式； 1. 三种显示模式： 块级标签（block）、行内元素（inline）、行内块元素（inline-block） 2.块级标签：block 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等 其中<div>...
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 下可能存在局限性需特别留意测试验证结果。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值