css对齐的问题?
不需要 float 吧,對齊用 vertical-align
float就不用display了,inlineblock本來就是顯示在一行的。或者給父元素加display:flex,兩個子標(biāo)簽分別加flex:20%和flex:80%。
去看看我的文章你就徹底明白了https://segmentfault.com/a/11...
其實問題的關(guān)鍵出在boder:1px 或者更明確一點:出在題主對于標(biāo)準(zhǔn)盒模型的的理解上,標(biāo)準(zhǔn)盒模型中,width是不包含border的,然而,你先是設(shè)置了 .item-logo和.item 的寬分別是20% 和80%,題主的愿意本來是想讓這兩個占滿這一行,但是因為加了border,所以.item-logo和.item 的實際寬度應(yīng)該是20%+2px(左右border各1px) 和80%+2px(左右border各1px) 所以一行是放不下的,因為兩個元素都設(shè)置了浮動,所以在這種情況下,.item元素實際上會移到下一行,題主可以通過設(shè)置.item為70% 或者設(shè)置border:0來驗證一下
float就不用display了,inlineblock本來就是顯示在一行的。或者給父元素加display:flex,兩個子標(biāo)簽分別加flex:20%和flex:80%。
去看看我的文章你就徹底明白了https://segmentfault.com/a/11...
其實問題的關(guān)鍵出在boder:1px 或者更明確一點:出在題主對于標(biāo)準(zhǔn)盒模型的的理解上,標(biāo)準(zhǔn)盒模型中,width是不包含border的,然而,你先是設(shè)置了 .item-logo和.item 的寬分別是20% 和80%,題主的愿意本來是想讓這兩個占滿這一行,但是因為加了border,所以.item-logo和.item 的實際寬度應(yīng)該是20%+2px(左右border各1px) 和80%+2px(左右border各1px) 所以一行是放不下的,因為兩個元素都設(shè)置了浮動,所以在這種情況下,.item元素實際上會移到下一行,題主可以通過設(shè)置.item為70% 或者設(shè)置border:0來驗證一下
總結(jié)
- 上一篇: 该不该怎样拍摄合影及全家福的摄影技巧?
- 下一篇: 水浒108将长卷是谁画的啊?