ul-li布局等分塊

代碼

圖片.png

注意:ul不設(shè)置寬度,包裹ul的包裹層必須設(shè)置合理的寬度
包裹層的寬度=三個(gè)li的寬度+2個(gè)縫隙(li設(shè)置的margin)+li設(shè)置了border就要加上
包裹ul的包裹層可以負(fù)責(zé)實(shí)現(xiàn)左右水平居中
ul設(shè)置的負(fù)margin會(huì)把自己的寬度變寬,從而方便下面一個(gè)li向上移動(dòng),所以只用設(shè)置合理的負(fù)margin即可,想讓ul的哪邊變寬,就設(shè)置margin的哪邊負(fù)值。但是不會(huì)影響ul的包裹層度寬度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,165評(píng)論 1 92
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測(cè)試過?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,377評(píng)論 0 8
  • 在很多布局中我們經(jīng)常能夠見到類似于margin:-10px;的用法,我們對(duì)正值的用法早已熟悉的不能再熟悉了,可是這...
    朱小維閱讀 1,999評(píng)論 3 6
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 1,127評(píng)論 0 1
  • 我是獨(dú)一無二的自己 我是有生命力的 我是老天賜予父母的禮物 我是擁抱自己生命力的主角 我是書房里沉靜悠揚(yáng)的輕音樂 ...
    青茶_2619閱讀 262評(píng)論 0 0

友情鏈接更多精彩內(nèi)容