偽元素的margin值擠壓主體元素解決

tulayang 發布于2019-08-30 15:54 / 1136人閱讀

摘要：偽元素的值擠壓主體元素解決主體是兩個標簽，需要再其左側添加一個豎線，很常見的需求目標前提條件右側的文字個數不固定問題需要讓元素為文字個數不固定時，整個元素的寬度是，根據文字的內容來算，此時使用偽元素時，如果偽元素占據的寬度過大，會導致文字被

偽元素的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云服務器云服務器偽元素獲取偽元素元素值數組元素值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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