CSS中display属性的inline-block导致布局错位问题

news2025/4/5 1:27:01

HTML部分代码

<div class="header_wrap">
	<ul>
		<li><a href="#">首页</a></li>
		<li>新闻</li>
		<li>角色</li>
		<li>世界</li>
		<li>漫画</li>
		<li>漫画</li>
		<li>赛事</li>
	</ul>
</div>

CSS代码

	.header_wrap ul {
		/* 元素空隙 的解决方案: 设置父元素, */
		display: table;
		word-spacing:-1em;
		/* 和word-spacing */
		margin: 0;
		padding: 0%;
	}
	.header_wrap ul li {
		/* 布局错位 */
		display: inline-block; 
		/* 解决方案 */
		vertical-align: top;
		/* float: left; */
		width: 14%;
		height: 60px;
		line-height: 60px;
	}
	.header_wrap ul li a {
		display: block;	
	}

不理想的效果 发现还原不回来现场 尴尬 大概样式

在这里插入图片描述

发现核心问题是 inline-block 默认的对齐方式

 vertical-align: baseline;

只需要设计

 vertical-align: top;

当然也可以是使用浮动float 或者 弹性盒子flex 完成上述需求

QQ浏览器
在这里插入图片描述

Firefox浏览器

在这里插入图片描述

设置行内块级元素之后,细心的人就会发现盒子间有空隙

检查元素发现li标签之间又显示空白 布局裂缝

在这里插入图片描述

盒子模型 检查 也没有影响的元素

在这里插入图片描述

原因是换行符空格间隙引起的问题

解决方案

ul{
	/* 元素空隙 的解决方案: 设置父元素, */
	display: table;
	word-spacing:-1em;
}

最终效果
在这里插入图片描述

更多解决方案请参考

先给出一段关于行内块级元素(inline-block)中基线(baseline)的定义:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

翻译一下:

对于一个 inline-block 元素,如果它内部没有内联元素,或者它的overflow属性不是visible,那么它的linr-height就是元素margin的底端。否则,就是它内部最后一个元素的基线。

css 使用display:inline-block的问题求解?

一、移除空格虽然可以解决,代码可读性大大降低。
	<div class="wrapper">
    	<div class="child1">child1</div><div class="child2">child2</div>
	</div>
二、使用 margin 负值.child2 {
    margin-left: -5px;
}
三、使用 font-size: 0.wrapper {
    font-size: 0;
}
.child1, .child2 {
    font-size: 14px;
}
四、letter-spacing.wrapper {
    letter-spacing: -5px;
}
.child1, .child2 {
    letter-spacing: 0;
}
五、word-spacing.wrapper {
    word-spacing: -5px;
}
.child1, .child2 {
    word-spacing: 0;
}

css div等块元素设置display:inline-block存在间隙问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/785447.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【个人笔记】Linux查询系统日志的命令journalctl

目录 查询系统日志的工具journalctljournalctl常用命令 查询系统日志的工具journalctl 从2012年开始&#xff0c;大部分linux发行版本开始从传统的systemv 初始化系统移植到一个叫做systemd的全新系统。systemd用来启动系统并管理进程。systemd包含了一个叫做journalctl的辅助…

前端 | ( 十二)CSS3简介及基本语法(中)| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 系列笔记&#xff1a; 【HTML4】&#xff08;一&#xff09;前端简介【HTML4】&#xff08;二&#xff09;各种各样的常用标签【HTML4】&#xff08;三&#xff09;表单及HTML4收尾…

【MyBatis-Plus 进阶学习笔记】

MyBatis-Plus 进阶学习笔记记录 一、 MyBatis Plus 七大功能0. 数据准备1. 逻辑删除2. 自动填充2.1 优化1 自动填充 有的类没有更新和创建时间字段2.2 优化2 自己设置时间时填充自己设置的&#xff0c;不设置时自动填充 3. 乐观锁插件 注&#xff1a;wrapper不能服用4. 性能分析…

SQL-每日一题【610.判断三角形】

题目 表: Triangle 写一个SQL查询&#xff0c;每三个线段报告它们是否可以形成一个三角形。 以 任意顺序 返回结果表。 查询结果格式如下所示。 示例 1: 解题思路 前置知识 CASE函数 CASE具有两种格式&#xff0c;简单CASE函数和CASE搜索函数。这两种方式&#xff0c;大部分…

SIGIR 2023 | 语音让对话推荐更easy,火山语音联合新加坡科学研究院发布业内首个语音对话推荐数据集

近年来&#xff0c;推荐系统在工业界取得了巨大成功&#xff0c;甚至成为互联网发展中不可或缺的增长引擎&#xff0c;基于此研究者们也在积极探索推荐系统的新形态&#xff0c;其中对话推荐系统&#xff08;Conversational Recommender System&#xff0c;简称CRS&#xff09;…

leetcode做题笔记37

编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 数独部分…

Flowable-UI

title: Flowable-UI date: 2023-7-23 12:19:20 tags: - Flowable Flowable-UI 安装 手把手教大家画了这样一个流程图&#xff0c;虽然说它不是特别好用&#xff0c;但是也不是不能用&#xff0c;也能用。好了&#xff0c;那么接下来的话&#xff0c;我们这个就先告一个段落&…

【OC总结 属性关键字】

文章目录 前言1. 属性关键字的分类2. 内存管理关键字2.1 weak2.2 assginweak和assgin的区别2.3 strong2.4 copy关键字copy关键字和strong的区别注意 2.5 多种copy模式&#xff1a;copy 和 mutableCopy 对 容器对象 进行操作2.6 问题总结 3. 线程安全的关键字 (nonatomic, atomi…

SpringBoot仅会SSM强撸项目--【JSB项目实战】

SpringBoot系列文章目录 SpringBoot知识范围-学习步骤【JSB系列之000】 文章目录 SpringBoot系列文章目录SpringBoot技术很多很多面对越来越紧的时间&#xff0c;越来越少的知识我要怎么办项目里可能要用到的技术前后端分离json其它的必要知识 环境及工具&#xff1a;上代码Co…

Java-IDEA好用的插件

Lombok&#xff0c;结合一些列注解&#xff0c;帮我们轻松解决重复编写实体类get、set、toString、build、构造方法等麻烦 Chinesepinyin-CodeComp&#xff0c;让界面汉化&#xff0c;使用起来更有亲和力 MyBatisX,点击小鸟图标&#xff0c;轻松再Mapper接口与xml文件之间实…

Spring Security OAuth2.0 - 学习笔记

一、OAuth基本概念 1、什么是OAuth2.0 OAuth2.0是一个开放标准&#xff0c;允许用户授权第三方应用程序访问他们存储在另外的服务提供者上的信息&#xff0c;而不需要将用户和密码提供给第三方应用或分享数据的所有内容。 2、四种认证方式 1&#xff09;授权码模式 2&#x…

云性能监控的应用是提升云服务质量的关键

随着云计算的普及和企业对云服务的广泛应用&#xff0c;保证云服务的质量和性能已成为企业的重要课题。在这一背景下&#xff0c;云性能监控应运而生&#xff0c;成为提升云服务质量的重要工具&#xff0c;也可以说云性能监控的应用是提升云服务质量的关键。 首先&#xff0c;云…

win10 hadoop报错 unable to load native-hadoop library

win10 安装hadoop执行hdfs -namenode format 和运行hadoop的start-all报错 unable to load native-hadoop library 验证&#xff1a; hadoop checknative -a 这个命令返回都是false是错的 返回下图是正确的 winutils: true D:\soft\hadoop-3.0.0\bin\winutils.exe Native li…

LLM-Blender:大语言模型也可以进行集成学习

最近在看arxiv的时候发现了一个有意思的框架&#xff1a;LLM-Blender&#xff0c;它可以使用Ensemble 的方法来对大语言模型进行集成。 官方介绍如下&#xff1a;LLM-Blender是一个集成框架&#xff0c;可以通过利用多个开源大型语言模型(llm)的不同优势来获得始终如一的卓越性…

pycharm 添加pyuic 插件

添加pyuic插件&#xff0c;就能将ui类型的文件转换称py格式的文件 进入主界面 打开文件->设置->外部工具 点击加号&#xff0c;添加扩展 图1 添加外部扩展 名字记作 pyuic&#xff0c;分组到External Tools 描述为ui to py ,地址选择为 python.exe 的目录地址 参数填写&a…

Python实现抽象工厂模式

抽象工厂模式是一种创建型设计模式&#xff0c;用于创建一系列相关或依赖对象的家族&#xff0c;而无需指定具体类。在Python中&#xff0c;可以通过类和接口的组合来实现抽象工厂模式。 下面是一个简单的Python实现抽象工厂模式的示例&#xff1a; # 抽象产品接口 class Abs…

客户案例 | 思腾合力服务器助力西安电子科技大学人工智能实验室建设

客户介绍 西安电子科技大学是以信息与电子学科为主&#xff0c;工、理、管、文多学科协调发展的全国重点大学&#xff0c;直属教育部&#xff0c;是国家“优势学科创新平台”项目和“211工程”项目重点建设高校之一、国家双创示范基地之一、首批35所示范性软件学院、首批9所示范…

微服务系列(1)-who i am?

微服务系列&#xff08;1&#xff09;-我是谁 应用架构的演化 简单来说系统架构可以分为以下几个阶段&#xff1a;复杂的臃肿的单体架构-SOA架构-微服务 单体架构及其所面临的问题 在互联网发展初期&#xff0c;用户数量少&#xff0c;流量小&#xff0c;硬件成本高。因此…

LangChain Agents深入剖析及源码解密上(一)

LangChain Agents深入剖析及源码解密上(一) LangChain Agents深入剖析及源码解密上 Agent工作原理详解 本节会结合AutoGPT的案例,讲解LangChain代理(Agent)为核心的内容。我们前面已经谈了代理本身的很多内容,也看了绝大部分的源代码,例如:ReAct的源代码,还有mrkl的源代…

HDFS基本操作命令

这里写目录标题 HDFS Shell CLI客户端说明常用命令hadoop fs -mkdir [-p] <path>hadoop fs -ls [-h] [-R] [<path>...]上传文件到指定目录下方法一:hadoop fs -put [-f] [-p] <localsrc>.....<dst>方法二&#xff1a;hadoop fs -moveFromLocal <loc…