css h 标签 在DIV 里 display: inline

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

#CSS

博客指出在CSS中添加一行代码“display: inline”即可解决问题，体现了简单代码在前端样式调整中的作用。
CSS 多了一行。。
display: inline
就好了
25-display:block；display: inline；display: inline-block；
qq_47462646的博客
12-05 540
【代码】25-块标签,行内标签,行内块标签，特殊标签。
display:inline的用法
09-25
和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了
关于 display: inline 、block 、inline-block
deadswan000的专栏
09-26 466
block元素的特点是：1N-u4T#@BT BrL0总是在新行上开始；中国经济网 经济博客+N/wl Z0V8z D&_高度，行高以及顶和底边距都可控制；,lrDM!P.A0宽度缺省是它的容器的100%，除非设定一个宽度中国经济网 经济博客MZw#VpU9U, , , , 和是块元素的例子。0vXy:oF rvL0中国经济网 经济博客
css中display：inline
墨尔本,晴
07-22 332
DIV1 DIV2 这里DIV1和DIV2分别占一行，但是你给他们加上属性后变了 DIV1 DIV2 DIV1和DIV2这时候显示在同一行了，试试看吧 和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:b...
CSS属性display:inline-block用法深入理解
09-25
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的显示方式。`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，...
display:inline-block的原理分析
09-25
`display:inline-block` 是 CSS 中的一个重要属性，用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、...
关于css display: inline block inline-block的区别分析
09-25
在CSS布局中，`display`属性是一个至关重要的样式规则，用于定义元素的呈现方式。`display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值，它们各自具有不同的行为和用途。 1. **display:...
CSS:display:inline;的认识
天地会
03-23 3228
 display:inline;就是将本来是块级的元素显示为内嵌的元素，比如div是一个块级元素，设置了display:inline之后，就会跟其他元素在同级显示了 例： text1 text2 这里的text1跟text2是分开在两行显示的 而 text text2 这里的text1和text2则是在同一行显示的inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改
display:inline
简单生活
08-26 1089
内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高 display:inline就是将元素显示为行内元素. 例如一个testtest默认会占2行,如果设置display:inline;,就会在一行内显示 h1 {font-size:12px;}h2,h4{font-size:12px; display:inline;}-->
html div里里h标签居中,html之块级标签h系列,div
weixin_29169899的博客
06-10 3568
两个名词含义：块级标签：内容再少也会占满整行内联标签：有多少内容点多少地方注：块级标签和内联不签不是绝对的，可以通过CSS作任意转换1、h1-h6 ：块级标签请仅仅把标题标签用作标题文本，如想获取粗体字请使用CSS或其它标签。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构This is page 1This is page 2This is page 3This i...
display:inline-block
湛庐无方
07-01 593
1、inline元素(比如span,em等)的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；
css之display:inline-block布局和浮动布局对比
wordpython
02-23 2387
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display:inline转载
weixin_43998771的博客
04-17 431
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display:inline， block， inline-block 介绍
shaoduo的博客
12-15 1447
说inline-block(行内区块元素)之前，先说下他另外的2个兄弟 display:inline; 内联元素，简单来说就是在同一行显示。他没有高度，给内联元素设置width和height是没效果的。 display:block; 块级元素，简单来说就是就是有换行，会换到第二行。同时可以设置宽高。 inline-block详解 inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-bl.
理解display:inline、block、inline-block
aiguke3395的博客
03-17 242
要理解display:inline、block、inline-block的区别，需要先了解HTML中的块级（block）元素和行级（inline）元素的特点，行内元素也叫内联元素。 块级元素 总是另起一行开始；高度，行高以及顶、底边距都可以控制；宽度缺省是它所在容器的100%，除非设定一个宽度。块级元素通常作为其他元素的容器，可以容纳内联元素和其他块元素。block ...
css样式 ： display:inline-block，block，inline解析
KLW75
09-24 916
想要理解display:inline-block，block，inline，首先要理解什么是块级元素与行内元素。 一、解释块级元素与行级元素 块级元素： 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 注意： 可以设置padding，margin的各个属性值，t...
为什么div{display:inline-block}没有横向排列？
最新发布
04-17
<think>好的，我现在需要解决用户的问题：为什么在设置div的display为inline-block后，多个div没有横向排列。根据用户提供的引用内容，我需要分析可能的原因。 首先，用户提到他们设置了display: inline-block，但div仍然没有横向排列。根据引用[1]，inline-block元素应该在一行显示，不像块级元素那样独占一行。所以正常情况下，设置这个属性应该能让div横向排列。 接下来，可能的原因有几个。首先，检查是否有空格或换行符。引用[4]中提到，当多个inline-block元素之间有空格或换行时，浏览器会渲染出间隙，但这里的问题不是间隙而是没有横向排列。不过，如果父容器宽度不够，可能导致元素换行。用户可能没有考虑父元素的宽度，如果父容器太窄，即使元素是inline-block，也会自动换行。这时候需要检查父元素的宽度是否足够容纳所有子元素的宽度总和。 第二个可能的原因是元素本身的宽度。如果每个div的宽度加上margin和padding超过了父容器的宽度，那么后面的div会被挤到下一行。需要确认div的总宽度是否合适，或者是否设置了固定宽度导致超出父容器。 第三个可能性是元素被设置了浮动或者其他影响布局的属性。如果div同时有float属性，可能会影响inline-block的表现。不过用户没有提到使用浮动，所以可能不是这个问题。 另外，还需要考虑是否有其他CSS样式覆盖了display属性。比如，可能存在更具体的选择器或!important声明，导致inline-block没有生效。用户应该检查开发者工具，确认div实际应用的样式是否正确。 还有一个情况是vertical-align属性的影响。虽然引用[1]提到块级元素忽略vertical-align，但inline-block元素会受到该属性的影响。如果vertical-align设置不当，可能导致元素对齐方式异常，比如基线对齐导致元素位置不对。不过这可能更多影响垂直对齐，而非水平排列。 最后，需要确认代码是否正确应用。比如，是否将样式正确写入了CSS，或者是否存在拼写错误，如将inline-block写成inline_block等。此外，浏览器兼容性问题也可能存在，但现代浏览器普遍支持inline-block。 总结起来，可能的原因包括：父容器宽度不足、div总宽度超出父容器、存在其他覆盖样式、HTML元素间有空格或换行导致意外间隙、vertical-align设置问题，或者代码错误。用户需要逐一排查这些可能性，特别是父元素的宽度和子元素的总宽度是否适配。</think>在设置`display: inline-block`后div未横向排列的常见原因及解决方法如下： ### 一、父容器宽度不足 当多个`inline-block`元素的总宽度超过父容器时，会自动折行显示。例如： ```html <div style="width: 400px"> <div style="display: inline-block; width: 200px"></div> <div style="display: inline-block; width: 200px"></div> <div style="display: inline-block; width: 200px"></div> </div> ``` 此时第三个div会换行显示。解决方案： 1. 增加父容器宽度 2. 添加`white-space: nowrap`强制不换行[^2] ### 二、元素间存在空白间隙 HTML换行符会被解析为空格，可能导致意外换行： ```html <div style="display: inline-block"></div> <!-- 这里有换行符 --> <div style="display: inline-block"></div> ``` 解决方法： 1. 删除HTML中的换行符 2. 设置父容器`font-size: 0`，子元素再重置字号[^4] ### 三、vertical-align对齐问题 `inline-block`元素默认基线对齐可能导致垂直错位： ```css .parent { height: 100px; } .child { display: inline-block; vertical-align: top; /* 必须显式设置 */ } ``` ### 四、宽度计算误差 当元素设置`box-sizing: content-box`（默认值）时，实际宽度=width+padding+border。例如： ```css div { display: inline-block; width: 33%; padding: 10px; /* 导致实际宽度超过33% */ } ``` 解决方法： 1. 改用`box-sizing: border-box` 2. 精确计算内容宽度 ### 验证步骤 1. 检查元素计算宽度（DevTools -> Computed） 2. 查看父容器剩余空间 3. 检查HTML结构中的空白节点 4. 确认没有冲突的浮动定位
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值