解决行内元素和行内块元素因代码换行而导致页面不理想的问题

最新推荐文章于 2024-11-06 21:30:00 发布
原创 最新推荐文章于 2024-11-06 21:30:00 发布 · 232 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

问题：代码+效果图片

 

 

1：给父元素设置font-size:0;

代码图：

 

效果图：

 2：将元素转换成块元素

代码图：

 效果图：

 

HPJackc
关注
VSCode回车换行后自动调整代码格式
花色游游的博客
10-27 7788
VSCode回车换行后自动调整代码格式（如运算符两侧加空格） VSCode Version:1.50.1 设置里面已经没有json模式编辑了（我找了好久没找到） 在VSCode设置中搜索 “Format On Type”， 然后再勾选 Editor: Format On Type前的框即可。 ...
行内元素出现换行的情况
Slice-dd
06-08 2330
例如这样： html<div id="box"> <input type="text"> <button>搜索</button> </div>css#box{ width:550px; height:40px; border:1px solid green; } #box input{ width:500px; height:40p
行内块元素因换行带来的间隔问题及解决方法
yigexiaobai_1的博客
07-17 1101
先看一个案例所展示的行内块元素因换行带来的间隔问题,俺直接上截图从第一张截图可以看到大盒子的宽度为640px,每个小a盒子的宽度为80px,按道理来说8个小a盒子的宽度加起来刚好等于640px,但从第二张截图的效果可以看出最后一个小a盒子由于父元素的宽度不够而掉了下来,这正是俺接下来要说的再来一张截图可以更加清楚地看见行内块元素之间因换行而带来的间隔。......
两个块级标签行内展示时错位问题
legendaryhaha的博客
10-05 2029
两个块级标签行内展示时错位问题 我们在将两个块级标签进行同一行展示时可以通过设置display: inline-block来达到效果，如下： &lt;style&gt; input,p{ display: inline-block; } &lt;/style&gt; &lt;div&gt; &lt;input type="text" id="text" /&gt;//实际上in...
VScode格式化代码换行问题
m0_60234005的博客
11-22 4677
让代码格式化后一行显示，可自由调节
我要精通前端-块级元素和行内元素深入学习笔记
最新发布
水镜先生的博客
11-06 1742
学习学习，提升本领
块元素div转变为行内块元素之后如何消除之间间隙
h_4444的博客
02-28 3335
块元素div转变为行内块元素之后如何消除之间间隙 写了三个div，使其变成行内块元素之后，发现，有间隙，哟，我的小天使啊。 最外层父级div宽度width大于三个小div宽度之和 父级div： #aaa{ width: 400px; margin: 0 auto; margin-top: 50px; border: 1px solid navy; } 三个子级div： #a1{ width: 130px; height: 40px;
CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法...
dengluandai1740的博客
10-07 421
我们可以发现：两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行，这是什么问题呢？ 我们先来看一下效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> ...
css 设置标签随文字换行移动——vertical-align
青蛙king的博客
03-01 2554
css 标签随文字换行，并紧随其后。当不足以展示标签时，标签自动换行。 代码实现如下： <div class='box'> <p class='desc'> qwertqwert <span class='lable'>1234567</span> </p> </div> .box { width: 300px; background: aliceblue; padding: 15px; } .d
什么是文档流？网页文档流的概念和缺陷
sususugaa的博客
10-13 999
在网页中，文档流（Normal Flow）是指浏览器在渲染网页时默认的元素排列方式。HTML 中的元素按照其在文档中的先后顺序依次排列，这种排列遵循一定的规则。对于块级元素（如。
前端基础之浮动个人相册
clover_oreo的博客
12-07 467
相册的布局同样使用到浮动float
（重点）浮动和清除浮动的四种方法：额外标签法、overflow、：after、双伪元素法
weixin_52583990的博客
07-19 678
本文介绍了浮动和清除浮动的方法
CSS层叠样式表学习--浮动
weixin_43903745的博客
07-19 973
CSS--浮动一、浮动1、传统网络的三种布局2、标准流（普通流/文档流）3、为什么需要浮动？4、什么是浮动？5、浮动的特性（重难点）5.1、浮动元素会脱离标准流（脱标）5.2、浮动元素会一行内显示并且元素顶部对齐5.3、浮动元素会具有行内块元素的特性6、浮动元素经常和标准父级搭配使用二、常见网页布局1、常见的网页布局2、浮动布局注意点三、清除浮动1、为什么要清除浮动2、清除浮动的本质3、清除浮动4、清除浮动的方法4.1、额外标签法，也称隔墙法，是W3C推荐的方法4.2、父级添加overflow属性4.3、父
CSS（3）布局
ruo_feng5984的博客
10-08 143
标准流—— 浮动（float）—— 浮动特性； 清除浮动； 定位—— 特性； 定位模式； 边偏移； 定位叠放次序； 定位盒子布局； ​
CSS基础入门 ----- 网页布局
weixin_65489884的博客
03-04 1004
网页页面设计
第四周---浮动、定位、伪类、伪元素
m0_62021245的博客
04-21 484
第四周 浮动、定位、伪类、伪元素
css浮动
mkbird的博客
07-20 150
文章目录浮动传统网页布局的三种方式标准流：标签按照规定好默认方式排列浮动什么是浮动为什么需要浮动浮动的特性浮动元素经常和标准流父级搭配使用demo常见网页布局浮动布局注意点清除浮动为什么清除浮动清除浮动的本质清除浮动 浮动 传统网页布局的三种方式 网页布局的本质—用css来摆放盒子。 css提供了三种传统布局方式（盒子的排列顺序）： 标准流、浮动、定位 实际开发中一个页面都包含了这三种布局方式。 标准流：标签按照规定好默认方式排列 块级元素独占一行，从上向下排列 常用元素：div、hr、p、h1~h6
front-end CSS(5) 浮动与清除浮动
小灯泡儿的博客
01-18 209
浮动与清除浮动
HTML基础知识，番外篇
Rava722的博客
12-05 378
记录最近所学的HTML的前端的一些基础知识 几个概念：文档流，html内容在加载的时候会从上到下，从左到右加载到流量器   脱离文档流，不再按照原来的方式进行，定位（position中的绝对定位）是完全脱离文档流，浮动（float）和相对定位是不完全脱离文档流，不完全脱离文档流的元素离开了原来的位置之后原来的区域会保留，完全脱离文档流则不会被保留   普通文档流布局：浮动元素不会被父
web前端学习笔记06-CSS浮动、定位、布局及margin重合问题
WPF调用摄像头（借用WPFMediaKit库）
07-01 316
一、浮动 1.1 文档流 文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 1.2 浮动的特性 浮动元素有左浮动（float:left）和右浮动（float:right）两种 浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来 相邻浮动的块元素可以并在一行，超出父级宽度就换行 浮动 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值