display:inline-block下,元素不能在同一水平线及元素间无margin间距的问题解决方法...

本文探讨了使用display: inline-block属性进行布局时遇到的两个常见问题:元素间莫名出现间距及无法保持同一水平线,并提供了相应的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在前端页面编辑中,常常用于块元素横排列时,我们会用到浮动或者dispaly:inline-block;

浮动虽然好用,效果明显,但是会存在潜在BUG,(暂且不论);那么display:inline-block也能使其横排,但是有两个很明显的问题:

1.横排元素之前没有设置,margin却多出了间距;

2.横排元素不能在同一水平线上;

看图:

处理方式:只需要在横排元素的父级设置font-size:0;即可

 

原因:

代码编译时,标签间有折行或空格,都相当于字符空格,这种字符,默认有font-size;所以除了设置font-size=0;还可以不进行折行或空格,但是这样不利于代码的阅读;

原图:

分析图:在父级元素首标签后按一个”delete“后面就会显示出空格字符

OK,接下来我们继续处理横排不在同一水平线的问题(顺带提一下,float无此BUG,都会以下边对齐);

原图:

处理:这是因为横排元素在父级元素盒子中,没有垂直方向的对齐方式;所以对横排元素垂直方向给与对齐设置即可;

 

详细的水平线问题,可以转移到这位老铁这里:

http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/

以及案例:

https://segmentfault.com/q/1010000007142118?_ea=1251429

转载于:https://www.cnblogs.com/chig/p/8287351.html

<div class="top-tabs"> <div class="breadcrumb"> 您所在的位置:首页 > 新闻资讯 > <span>综合资讯</span> </div> <!-- 选项卡类名改为 .tab-item(与 CSS 统一) --> <div class="tabs news-tabs"> <a href=" " class="tab-item active">综合资讯</a > <a href="#" class="tab-item">行业新闻</a > <a href="#" class="tab-item">行业动态</a > </div> </div>.pc .center-content .top-tabs { /* 移除底部边框 */ border-bottom: none; /* 弹性布局,内容左右两端分布 */ display: flex; justify-content: space-between; align-items: center; /* 垂直居中 */ padding: .29rem 0; /* 调整内边距 */ } /* 面包屑样式(居左) */ .pc .center-content .top-tabs .breadcrumb { font-size: .14rem; color: #A0A0A0; } /* 选项卡容器样式 */ .pc .center-content .top-tabs .tabs { display: flex; gap: 1rem; /* 选项卡间距 */ } /* 选项卡单个项样式 */ .pc .center-content .top-tabs .tab-item { cursor: pointer; display: inline-block; margin-left: 0; /* 移除左侧边距 */ padding: .08rem .2rem; /* 内边距 */ color: #66676B; text-decoration: none; /* 移除下划线 */ /* 过渡效果 */ transition: color 0.3s ease; } /* 激活状态样式(无下划线) */ .pc .center-content .top-tabs .tab-item.on { color: #DB1521; position: relative; /* 为指示器定位做准备 */ } /* 激活状态下的底部指示器(替代传统边框) */ .pc .center-content .top-tabs .tab-item.on::after { content: ""; position: absolute; left: 50%; bottom: -4px; /* 位于文本下方 */ transform: translateX(-50%); width: 80%; height: 2px; background-color: #DB1521; /* 红色指示器 */ } /* 悬停样式(非激活状态变色) */ .pc .center-content .top-tabs .tab-item:hover:not(.on) { color: #DB1521; }在面包屑导航下增加一道灰色横线 长度为从第一个字到最后一个字 选项卡位于页面最右侧 字体为黑色下方没有下划线 激活状态为红色且正下方有一红点与面包屑导航在页面中位于同一
06-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值