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

这篇具有很好参考价值的文章主要介绍了CSS中display属性的inline-block导致布局错位问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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;	
	}

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

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

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

 vertical-align: baseline;

只需要设计

 vertical-align: top;

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

QQ浏览器
CSS中display属性的inline-block导致布局错位问题,css,前端

Firefox浏览器

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

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

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

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

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

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

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

解决方案

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

最终效果
CSS中display属性的inline-block导致布局错位问题,css,前端

更多解决方案请参考

先给出一段关于行内块级元素(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存在间隙问题文章来源地址https://www.toymoban.com/news/detail-608170.html

到了这里,关于CSS中display属性的inline-block导致布局错位问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css中新型的边框设置属性border-inline

    border-inline 是 CSS Logical Properties and Values 模块中的一个属性,用于控制元素在流内(inline)方向上的边框。该模块旨在提供与书写模式(writing mode)无关的布局和样式描述方式,使得元素在不同书写模式(如ltr、rtl、ttb等)下能够统一、适当地处理边框,它和 border-block 的区别

    2024年04月28日
    浏览(30)
  • 【CSS弹性盒模型 display:flex;常用参数及常见的布局】

    display:flex; 是CSS中用于创建弹性盒子布局的属性,其常见的各种参数及用法包括: flex-direction 指定主轴的方向,可以是row(水平方向)、column(垂直方向)等。 justify-content 定义在主轴上的对齐方式,可以是flex-start(靠近起点)、flex-end(靠近终点)、center(居中对齐)、s

    2024年02月13日
    浏览(41)
  • CSS中的display属性有哪些值?它们的作用?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(37)
  • CSS布局基础(CSS属性特征 & 盒子阴影 & 文字阴影)

    块元素 独占一行,默认宽度100% 可设置宽高,内外边距 大部分块元素内部可以放 任意元素 文字类块元素 p / h1-h6内部,不能放块元素 常见块元素 h1-h6 p div ul ol dl li … 行内元素 在同一行显式 不能直接设置宽高,默认宽高就是实际内部内容宽高 内部只能容纳文本或者行内元素

    2024年02月01日
    浏览(76)
  • 【CSS 08】display 控制布局 块级元素 行内元素 隐藏元素 结合JS 最大宽度 浏览器窗口 定位 position z-index 堆叠

    说在前面 CSS基础教程系列已经结束,接下来就是中级教程,让我们跟上脚步,继续努力吧! 并且最近临近期末考试,后面十天休刊… display display 属性是用于控制布局的最重要的 CSS 属性 display 属性规定是否/如何显示元素 隐藏元素 - display:none 还是 visibility:hidden 通过将 disp

    2024年02月08日
    浏览(57)
  • 【CSS Grid网格布局】常用属性,示例代码解读

    grid-template-columns/grid-template-rows:用于定义网格的列和行的大小和数量。可以指定具体的尺寸值(如px、em等),也可以使用fr单位表示剩余空间的比例分配。 grid-column-gap/grid-row-gap:用于定义网格的列间距和行间距。可以使用具体的尺寸值或百分比。 grid-template-areas:用于定义

    2024年02月12日
    浏览(44)
  • css之Flex弹性布局(父项常见属性)

    本篇博客会讲解css中的弹性布局的常见用法, 将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的 start、end ,上下边对应交叉轴的 start、end ) 🪂行排列 flex-direction: row 🪂将行排列进行翻转排列 flex-direction: row-reverse 注意:由于翻转时主轴的start、end会进

    2024年02月08日
    浏览(50)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(51)
  • css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧

    目录 3.CSS三角  4.CSS 用户界面样式 4.1什么是界面样式  4.2轮廓线 outline  4.3 防止拖拽文本域 resize  5.vertical-align 属性 5.1图片,表单都属于行内块元素,默认的vertical-align 是基线对齐。 5.2解决图片底部默认空白缝隙问题 6.溢出的文字省略号显示 1.单行文本溢出显示省略号--必须

    2023年04月09日
    浏览(48)
  • static、extern、inline 说明符和链接属性

    在我初学 C++ 时, static 、 inline 、 extern 可能是最令我迷惑的 C++ 说明符,原因是它们在不同的语境下会发挥不同的作用,而且某些说明符的含义已经和以前不同,这加剧了我在查询资料时的困扰。所以今天决定好好总结一下。 首先要介绍 C++ 的两个概念: 存储期 和 链接 。

    2024年02月05日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包