当设置display:inline；时，盒模型的宽度样式失效的解决办法

最新推荐文章于 2024-08-17 21:15:18 发布
最新推荐文章于 2024-08-17 21:15:18 发布
阅读量504 收藏 9
点赞数 9
分类专栏： css 文章标签： 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/galaxyJING/article/details/135382520
版权

当给一个盒子的样式加了

.box{

display: inline

}后，发现宽度就失效了，但是有需要盒子不换行

把display: inline 删了 换成float: left; 效果是一样的。

LXXgalaxy
关注
专栏目录
弹性盒学习笔记(display:flex/inline-flex;)
lwr3379966的博客
03-21 2145
文章目录弹性盒学习笔记(display:flex/inline-flex;)一.flex容器属性（给父级元素添加的属性）1、display:flex、inline-flex2、flex-direction属性 决定主轴的方向（即项目的排列方向）3、flex-wrap属性，定义子元素是否换行显示4、 flex-flow5、 justify-content属性 定义了项目在主轴（）上的对齐方式。6、a...
自学前端第九天 : CSS标准盒子模型
weixin_47592060的博客
05-04 983
标准盒子模型（CSS重点） 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 1.前提了解: ①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;} 因为浏览器是默认使用CSS的stylesheet样式表的,而这个
【bug记录5】flex横向布局时子元素设置宽度无效
最新发布
weixin_57208584的博客
08-17 753
对父元素list使用了flex布局之后，尝试将其子元素item固定宽度，但发现。宽度设置不生效并且实际宽度被压缩了。，代表元素不允许被弹性布局挤压。优先适配自己的父元素的宽度。在item子元素里面加一个。
块元素设置inline属性不能设置宽高的解决办法
仗键天下 策码一生
05-22 5561
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://www.blogbus.com/catller-logs/30679536.html inline为display属性：设置是否及如何显示元素 ---> 此元素会被显示为内联元素，元素前后没有换行符。 在，可以使其在一行中显示。但当这个时候我无法给li限制高度和宽度。给布局上带来很大的不便。 Li，
display属性
weixin_43786904的博客
06-12 906
根据css规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。 块元素和行元素是可以转换的，也就是说display的属性值可以由我们来改变。 display常见属性值 none ...
关于CSS3中display:inline的易错点
qq_21007229的博客
12-14 1081
我们都知道当display:inline时， inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 但是对于margin,padding却有一些模糊，我看到过很多人写的博客，大多都是写的: margin-top,margin-bottom设置无效，margin-left,...
比float更好的页面布局inline-block
weixin_33885253的博客
09-13 185
一：页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二：流行多年的浮动布局的优劣 优势： div+css浮动布局的优势，主要是相对于table布局来说的。主要表现为下面几个方面： 1，更快的网页呈现速度； 2，更佳的后台编程支持度； 3。更好的搜索引擎友好性。 4。更优的网页改动重构性。 ...
火狐中当设置display:inline;时li的宽度无效
08-23 140
#main5b2 li { BORDER-BOTTOM: #e9e5d5 1px dashed; margin:0px; padding:5px 0px 5px 0px; display:inline; width:242px; ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
weixin_39672443的博客
06-07 5918
目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 2054
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
CSS-1-样式优先级 position 居中 display 弹性布局 盒模型 省略号 坍塌
sharryling
03-26 752
参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。 其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...
当设置display:inline;时li的宽度无效的解决方法
zhaojun_8202的专栏
02-18 1105
若制作导航栏时，使用列表li 的定义时，若想加上一个背景图 ，这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;}，则浏览器会无视后面的高和宽属性的定义，按照默认字体大小来显示！ 解决的方法为，将display:inline ,改成 display:block； 和加上float:left; 即可正常，完整的应为：li{...
前端问题解决方法
qq_63514555的博客
12-05 2863
springboot+vue3+mybatis-plus框架项目错误总结
display:inline 会导致表格宽度 不好调整
weizhongxing6的专栏
03-04 3519
这篇文章我们将要来讨论css里面的“块元素”和“内联元素”，并举例讲解用不好的时候，会导致哪些问题。 首先，我们来定义一下这两个概念。 块状元素 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 内联元素 内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一
不再混淆，一次搞懂！图解flexbox十余个属性
weixin_30316097的博客
07-29 137
原文首发于个人博客：不再混淆，一次搞懂！图解flexbox十余个属性 flexbox的发明简直是csser的一大福音，终于可以不再需要为垂直居中一个元素而绞尽脑汁了。同时它还能够实现弹性布局，可以说没有它做不到，只有你想不到。但是由于历史原因，flexbox的有多个版本在市面上流通，需要使用不同的厂商前缀或者使用完全不一样的属性名，起初的时候造成人们使用的困扰。 不过后来随着css后处理器的出现...
两个元素设置display: inline-block之后宽度50%不能在一行显示
weixin_42178670的博客
08-03 1001
解决方法一： 删除两个元素之间的空格 // 以下写法会变成两行 <div>line1</div> <div>line2</div> // 以下写法不会变成两行，删除两个元素之间的空格 <div>line1</div><div> line2</div> 解决方法二： 在父级容器设置font-size: 0; ...
微信小程序：属性display详细解析
热门推荐
wuwuFQ的博客
09-27 1万+
display：block 小程序的3个视图容器（view，srcoll-view，swiper）默认值均为display:block block表示[块内]容器模式，总是使用新行开始显示 display：flex flex-direction属性，有下面4个可选值，默认为row row：水平排列 （默认） row-reverse：水平翻转排列 column：竖直排列 column-rev...
CSS display 属性详解
huajiongni9676的博客
12-06 1168
display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /* CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display:
CSS深度解析：display:inline-block属性及空隙问题解决方案
- 当需要将原本的块级元素（如`<li>`标签）转换为`inline-block`时，除了`display:inline-block`外，可能还需要针对IE6/7使用特定的hack。这通常涉及到额外的CSS规则，例如使用`*display:inline;`和`*zoom:1;`。 5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

LXXgalaxy

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

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

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

打赏作者

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

抵扣说明：

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

余额充值