首頁猿問如何解決inline-block替...

如何解決inline-block替代float:left出現(xiàn)的寬度變化？

Html/CSS

小佳佳QAQ 2015-10-21 13:38:36

采用inline-block取代float:left;進(jìn)行布局時(shí)，在所有寬度精確計(jì)算的情況下，inline-block會(huì)把最后一個(gè)部分?jǐn)D下去，怎么解決這個(gè)問題？

查看完整描述

3 回答

已采納

慕男嬸

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

inline-block換行多出來的寬度是把換行符也作為文本節(jié)點(diǎn)的一部分了。

解決辦法是定義你要inline-block的元素的父元素的font-size:0即可解決，如果inline-block元素本身也有文本的話，在單獨(dú)定義inline-block元素的font-size即可

當(dāng)然，還有一個(gè)辦法，就是讓inline-block元素之間緊挨著，不要有空格和換行，但是這個(gè)方法不可靠，不建議你使用。

1 反對(duì) 回復(fù) 2015-10-21

echo_kinchao

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

你的代碼不要換行不就好了 ?在他是inline-block的時(shí)候。。。

反對(duì) 回復(fù) 2015-10-21

echo_kinchao

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

你是不是代碼換行了 ?inline-block的話你代碼換行會(huì)多出4PX的寬度

反對(duì) 回復(fù) 2015-10-21

關(guān)注