伪元素的margin值挤压主体元素解决

tulayang 发布于2019-08-30 15:54 / 1118人阅读

摘要：伪元素的值挤压主体元素解决主体是两个标签，需要再其左侧添加一个竖线，很常见的需求目标前提条件右侧的文字个数不固定问题需要让元素为文字个数不固定时，整个元素的宽度是，根据文字的内容来算，此时使用伪元素时，如果伪元素占据的宽度过大，会导致文字被

伪元素的margin值挤压主体元素解决

主体是两个p标签，需要再其左侧添加一个竖线，很常见的需求

目标

前提条件

1. 右侧的文字个数不固定

问题

1. 需要让before元素为`float:left`；
2. 文字个数不固定时，整个元素的宽度是auto，根据文字的内容来算，此时使用 :before伪元素时，如果伪元素占据的宽度过大，会导致文字被挤下去

.demo:before{
  float: left;
  height: 67px;
  content: "";
  border-right: solid 3px $primary;
  border-left: solid 2px $primary;
  margin-right: 10px;
}

解决

将 margin-right: 10px; 改为margin-left: -10px; 使之不占据主体的空间

jsfiddle

云服务器 GPU云服务器伪元素获取伪元素元素值数组元素值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117007.html

构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

andot 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 布局 ]

摘要：布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中 + 行内块级元素（text-a...

JessYanCoding 2019-08-02 16:31 评论0 收藏0
布局

摘要：双飞翼布局是对圣杯布局的优化，先实现中间最重要的身体部分，再实现翅膀，所以叫双飞翼布局。参考资料跟这些特性相互叠加后会怎么样经典布局之双飞翼布局 ‘display’、’position’ 和 ‘float’ 的相互关系 showImg(https://segmentfault.com/img/bVECeu?w=720&h=540); 圣杯布局和双飞翼什么是圣杯布局和双飞翼布局？圣杯...

wangtdgoodluck 2019-08-29 11:29 评论0 收藏0
如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题？

摘要：以来说，就是在触发页面滚动条时候，会挤压掉的空间，那我们就可以从不同角度考虑去解决了。引言页面滚动条造成宽度减小的场景很常见了，由于div块级元素的流动性，其宽度默认为100%的body宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压body的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的...

scq000 2019-08-29 17:17 评论0 收藏0