亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何用flex布局解決如圖所示的問題?

如何用flex布局解決如圖所示的問題?

慕的地6264312 2019-03-04 22:14:37
現在有以下的html結構, li標簽數量未知且可變, 需要使用對ul標簽display: flex進行布局, 頁面效果如圖所示. 效果描述:圖1. 當li標簽不夠的時候, 該如何處理?圖2. 當li標簽的距離大于li標簽的寬度, 該如何處理?<ul>     <li></li>     ...    <li></li><ul>
查看完整描述

2 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

這個你可以參考阮一峰老師的flex布局

其實在這里我并不清楚你要表達什么:

  1. li標簽不夠,這個是可變的,這個不可控,他有幾個就顯示幾個,比如說一行你想要三個你可以設置li的大小呀,然后多余的li標簽換行顯示。

ul {  display: flex;
  flex-wrap: wrap; //換行}

2.我覺得你的意思是間距太大不好看。這些都是你自己可以設置的呀,比如說設置第一個的margin-left和第三個的margin-right.自己調整布局。然后通過能:nth:child()設置1,4,7.。。的margin-left,和3,6,9的margin-right


查看完整回答
反對 回復 2019-03-04
  • 2 回答
  • 0 關注
  • 640 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號