首頁(yè) 猿問(wèn) 請(qǐng)教下如下面這種自適應(yīng)橫線的效果如...

請(qǐng)教下如下面這種自適應(yīng)橫線的效果如何實(shí)現(xiàn) ?

CSS3 Html/CSS Html5

charsandrew 2017-12-29 14:25:38

psd圖樣式如下：左邊的標(biāo)題部分寬度不固定，橫線的寬度也不固定。中間應(yīng)該有固定的間距。請(qǐng)教下，有什么實(shí)現(xiàn)的方法嗎？

查看完整描述

3 回答

已采納

陌上人如玉_010

TA貢獻(xiàn)19條經(jīng)驗(yàn) 獲得超16個(gè)贊

線和錢(qián)用浮動(dòng)，左邊文字用定位，給個(gè)白色背景

反對(duì) 回復(fù) 2017-12-29

點(diǎn)擊展開(kāi)后面1條

懶洗

TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超0個(gè)贊

div背景加橫線，左邊的名字用白色背景蓋住線，右邊的錢(qián)用白色背景蓋住線

反對(duì) 回復(fù) 2017-12-29

charsandrew
嗯，這樣可以的。我后來(lái)是使用的float + BFC實(shí)現(xiàn)的。大概有3種方法可以搜索下不定寬度 + 自適應(yīng)布局。

回復(fù) 2017-12-29

拖鞋_

TA貢獻(xiàn)453條經(jīng)驗(yàn) 獲得超223個(gè)贊

display flex

反對(duì) 回復(fù) 2017-12-29

關(guān)注