让div不独占一行

本是古典何须时尚 2022-01-06 01:13 317阅读 0赞

以 div A 和 B为例，宽高为100px。

1、使div浮动起来，效果图如下

![1609148-20190620165325243-493827880.png][]

2、给 div 添加CSS属性 display：inline；

但是这样会造成 div 的宽高无效，宽高是被 div 内的内容撑开的，效果如下图：

![1609148-20190620170318242-1718969334.png][]

使用 display：inline-block；　　效果如下图：

![1609148-20190620170655479-1680111859.png][]

但是这样会产生一个新的问题，A 和 B 中间有一个缝隙

这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合 并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

解决方案：

对父元素添加，\{font-size:0\}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙 （div内的字同时消失）

效果图如下：

![1609148-20190620171803167-1373493390.png][]

转载于:https://www.cnblogs.com/PHP0222wangdong/p/11060004.html

[1609148-20190620165325243-493827880.png]: /images/20211228/24d018d276aa467b9f2a80ce028321bb.png
[1609148-20190620170318242-1718969334.png]: /images/20211228/c5471a701dc643dfbeb443ff219b230e.png
[1609148-20190620170655479-1680111859.png]: /images/20211228/8d58028c301d40c6aff92bbd20af59bb.png
[1609148-20190620171803167-1373493390.png]: /images/20211228/fa2092df8cd448359d53f9b5116a21a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

相关解决ul元素不能跟div同一行显示的办法

现象如下： ![8899d6cb48924c09a94f40ccf28ccafc.png][] html结构如下： ![a3b70de0421543d9a54cceb05

妖狐艹你老母/ 2023年10月15日 20:04/ 0 赞/ 7 阅读

相关 RecyclerView item独占一行实现

核心代码： GridLayoutManager manager = new GridLayoutManager(context, 4); ma

叁歲伎倆/ 2023年06月02日 15:51/ 0 赞/ 27 阅读

相关独占一行 html_Web前端开发-HTML入门干货

![08de21cc9bff8097a4c7a1292bce592c.png][] Web前端开发包括三大标准：HTML、CSS、JAVAScript，在网页中起到的作用分别

港控/mmm°/ 2023年01月06日 13:59/ 0 赞/ 166 阅读

相关一行显示多个div 并居中显示

代码：主要是样式：display:table-cell; <style> .primary_button { border-styl

墨蓝/ 2022年09月21日 01:28/ 0 赞/ 234 阅读

相关【html css】DIV+CSS如何让图片和文字在同一行

【html css】DIV+CSS如何让图片和文字在同一行前端react项目要写一个图标放在标题后面。在div+css布局中，如果一行(或一个DIV)内容中有图片和

迈不过友情╰/ 2022年09月04日 05:52/ 0 赞/ 351 阅读

相关一行div框，两边顶头显示

<style> .pdiv{background-color:999; width:1000px; height:500px; overflow:hidden;

偏执的太偏执、/ 2022年07月27日 10:45/ 0 赞/ 186 阅读

相关 div内元素不在一行的问题解决方法

让div内两个元素直接浮动向同一方向即可，然后设置一下两个元素的间距，即可解决该问题代码如下： <div> <inpu

我就是我/ 2022年03月18日 03:26/ 1 赞/ 671 阅读

相关让div不独占一行

以 div A 和 B为例，宽高为100px。 1、使div浮动起来，效果图如下　　![1609148-20190620165325243-493827880.png][

本是古典何须时尚/ 2022年01月06日 01:13/ 0 赞/ 318 阅读

相关多个div一行显示，超出的自动排列到下一行

<div style="width: 600px;"> <div style="display: inline-block;width: 100px;mar

迈不过友情╰/ 2021年12月18日 05:35/ 0 赞/ 602 阅读

相关多个div在一个div中一行水平显示

1.使用 inline-block .an{ display: inline-block; }

小鱼儿/ 2021年09月27日 11:26/ 0 赞/ 410 阅读