父级元素包含几个行内元素

<div id="box">
<p>
<span>按钮</span>
<span>测试文字文字文字测试文字文字文字</span>
<span>看这里</span>
</p>
</div>
#box p{
width: 800px;
font-size: 30px;
}
      #box p span{
display: inline-block;
box-sizing: border-box;
/*vertical-align:top/bottom*/
}
#box p span:nth-child(2){
padding-left: 10px;
width: 350px;
/* overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;*/
}

正常显示,且在同一行;当设置overflow:hidden之后,元素出现不对齐的情况

原因:

行内元素的默认对齐方式是基线对齐即(vertical-align:baseline),设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘;其他行内元素依然还是基线对齐就会出现下沉的视觉效果

解决方法:

1、重新设置所有行内元素的对齐方式为vertical-align:top或者bottom

2、设置所有的行内元素的overflow不为visible

3、设置flex布局

说明:vertical-align属性针对行内元素和表格属性元素使用,在块级元素中不起作用

设置overflow:hiden行内元素会发生偏移的现象的更多相关文章

  1. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  2. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  3. 利用vertical-align实现行内元素对齐

    实际项目中,常常会遇到一排行内元素对齐排列的需求,但是往往它们是这样的 我们想要的其实是这样的 曾经我一度不得不使用定位来实现我想要的位置效果,将父元素设置 position:relative ,行内 ...

  4. CSS中的块级元素,行内元素,行内块元素

    博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...

  5. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  7. 行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值

    曾经学过的教程中写明:行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外 ...

  8. line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  9. 块级元素或者行内元素在设置float属性之后是否改变元素的性质?

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

随机推荐

  1. 举一个有趣的例子,让你轻松搞懂JVM内存管理

    目录 前言 例子 源码 输出 图解 深入分析 学以致用 写在最后 前言 在JAVA虚拟机内存管理中,堆.栈.方法区.常量池等概念经常被提到,对理论知识的理解也常常停留在字面意思上,比如说堆内存中存放对 ...

  2. 自己动手实现深度学习框架-7 RNN层--GRU, LSTM

    目标         这个阶段会给cute-dl添加循环层,使之能够支持RNN--循环神经网络. 具体目标包括: 添加激活函数sigmoid, tanh. 添加GRU(Gate Recurrent U ...

  3. Go语言json编码驼峰转下划线、下划线转驼峰

    目录 一.需求 二.实现 三.使用 JsonSnakeCase统一转下划线json JsonSnakeCase统一转驼峰json 一.需求 golang默认的结构体json转码出来,都是大写驼峰的,并 ...

  4. 秒懂系列,超详细Java枚举教程!!!

    所有知识体系文章,GitHub已收录,欢迎Star!再次感谢,愿你早日进入大厂! GitHub地址: https://github.com/Ziphtracks/JavaLearningmanual ...

  5. [julia][学习笔记]julia的安装

    目录 julia的安装 下载地址 下载后安装 IDE Julia Pro 安装方法 使用方法(以hello world为例) vscode的Julia插件 下载vscode 安装vscode Juli ...

  6. HashMap(二)之面试题系列

    定义类考题 什么是Hash?什么是HashMap? HashMap 的工作原理是什么 HashMap HashTable的区别 为什么要用HashMap 源码类考题 什么是hash碰撞,怎么减少碰撞, ...

  7. JS 姓氏,区域,消息组成的随机内容定时随机展示

    var surname_g = "\u8D75\u94B1\u5B59\u674E\u5468\u5434\u90D1\u738B\u51AF\u9648\u891A\u536B\u848B ...

  8. php 加反斜杠的原因与处理办法

    php程序加反斜杠的原因就是要进行特殊字符的转义. 默认PHP 指令 magic_quotes_gpc是on的,这时候就可以用stripslashes() 函数删除自动添加的反斜杠. 用法就是:str ...

  9. 列表、元组、字典和简单if语句【python实验1】

    第一次实验报告: 学生姓名 总成绩 tom 90 jack 89 john 96 kate 86 peter 100 实验内容3-1 建立两个列表分别对学生的姓名和总成绩信息进行存储 name=['t ...

  10. 网页中为什么常用AT替换@(repost from https://zhidao.baidu.com/question/122291.html)

    经常在个人主页上看到别人的邮箱地址中@被AT符号替代,很是迷惑,这样替代有什么好处呢?还是说html原有的原因使界面中不能出现@,查阅资料后解答如下: 写成AT [at],是为了防止被一些邮件扫描器搜 ...