第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

正確調(diào)整最后一行的彈性項(xiàng)目的大小和對(duì)齊方式

正確調(diào)整最后一行的彈性項(xiàng)目的大小和對(duì)齊方式

慕容3067478 2019-09-06 15:51:38
假設(shè)我有一個(gè)用戶列表,每個(gè)用戶都附加了一些號(hào)碼。每個(gè)用戶都列出如下:<span><a href="/user/Niet">Niet</a> &rArr; 2</span>它們的風(fēng)格都是:.userlist>span {    display: inline-block;    padding: 2px 6px;    border: 1px solid currentColor;}這是一個(gè)實(shí)際的例子:好吧,這看起來(lái)很好,用戶列表可以長(zhǎng)得很長(zhǎng),所以緊湊在這里很重要。我的問(wèn)題是,右邊緣是非常不一致的,所以我想知道是否有任何方法可以改善這一點(diǎn)。當(dāng)然,我的第一個(gè)想法是在跨度上設(shè)置固定寬度。但是,用戶名寬度不是完全可預(yù)測(cè)的。你可以打電話iiiii給某人打電話WWWWW但是因?yàn)檫@不是monospace字體,你會(huì)得到“iiiii”和“WWWWW”,那里的寬度非常明顯不同。所以“最大寬度”基本上是最寬的允許字符,即W乘以最大用戶名長(zhǎng)度。我們?cè)囋嚢?.....EW。我不妨使用一個(gè)<ul>如果這是我將得到的結(jié)果。接下來(lái)的想法可能是讓display:table寬度在列之間保持一致,同時(shí)仍然保持動(dòng)態(tài)并且 - 假設(shè)大多數(shù)人都有合理的用戶名(*咳嗽* ......哦,嘿,這就是你如何逃避Markdown ......呵呵...... 。) - 但它確實(shí)往往會(huì)留下很多空的空間。所以我目前的想法是某種合理的對(duì)齊。這對(duì)文本很有效,對(duì)吧?但是,唉,text-align: justify確實(shí)在這種情況下完全錯(cuò)誤,可能是因?yàn)橐刂g沒(méi)有空格。我最后的嘗試是使用flexbox,我已經(jīng)在網(wǎng)站的新設(shè)計(jì)中使用了一些效果。讓我們看看它display: flex; flex-wrap: wrap;在容器和flex: 1 0 auto;元素上的外觀......Flexbox的嗯,這看起來(lái)不太糟糕。不太糟糕失敗......嗯。很近。我真正喜歡的是最后一行元素不會(huì)被拉伸到最終。沒(méi)關(guān)系,最后一行有三個(gè)或四個(gè),但兩個(gè)看起來(lái)有點(diǎn)傻,只有一個(gè)填滿整個(gè)寬度,看起來(lái)很荒謬。所以我想這整個(gè)小冒險(xiǎn)歸結(jié)為一個(gè)簡(jiǎn)單的問(wèn)題:我如何實(shí)現(xiàn)類似于對(duì)齊的行為,其中元素間隔使用容器的整個(gè)寬度,除了在它們應(yīng)該使用它們的自然寬度的最后一行?要完成這個(gè)小故事,感謝@ Michael_B的回答,這就是我如何實(shí)現(xiàn)解決方案:.userlist:after {    content: '';    flex: 10 0 auto;}
查看完整描述

1 回答

  • 1 回答
  • 0 關(guān)注
  • 492 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)