假設(shè)我有一個(gè)用戶列表,每個(gè)用戶都附加了一些號(hào)碼。每個(gè)用戶都列出如下:<span><a href="/user/Niet">Niet</a> ⇒ 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;}
添加回答
舉報(bào)
0/150
提交
取消