作者danny0838 (道可道非常道)
看板Web_Design
標題[問題] 用CSS排版自動適應寬度的inline項目表
時間Thu Mar 1 04:22:17 2018
如題，假設我的 HTML 原始碼像這樣：
<ul class="my-custom-class">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
...
</ul>
我希望讓這些項目用以下方式排版：
1. 每個項目寬度為10em：第1項從0em開始，第2項從10em開始，像這樣：
↓容器寬
項目１ 項目２ 項目３
項目４ 項目５ 項目６
2. 文字不在項目內折行：例如容器寬23em，第3項寬7em，則第3項從第2行0em開始
（而不是從第1行20em開始再把部分字元折到下一行）
↓容器寬
項目１ 項目２
項目３文字稍多 項目４ 項目５
3. 如果一個項目寬度超過10em，則其寬度延展為10em的整數倍：
例如第1項從0em開始、寬12em，則第2項從20em開始，依此類推。如下：
↓容器寬
項目１不巧字數稍微多了點 項目２ 項目３
項目４ 項目５ 項目６
4. 萬一有項目的寬度超過容器寬，則由0em開始，並且把放不下的字元折到下一行：
↓容器寬
項目１
項目２的文字恰好長得很離譜很離譜很離譜離譜很離
譜很離譜 項目３ 項目４
項目５ 項目６
請教各位高手：這樣的顯示效果要怎麼用純CSS做出來？
--
《終結內容農場》瀏覽器套件
Firefox:
https://mzl.la/2g0I0ry (桌機 & Android 手機)
Chrome:
http://bit.ly/2wDWWyP
真相1:
https://i.imgur.com/JKPzD1L.png
真相2:
https://i.imgur.com/WTHmuVJ.png
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.243.236.189
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1519849344.A.3F7.html
※ 編輯: danny0838 (111.243.236.189), 03/01/2018 04:34:16
1F：推 ymcheung: 還沒有試 不過感覺可以用 min-width: max-content; 03/01 14:40
2F：→ ymcheung: 搭配 max-width: 你的寬度; 來用 03/01 14:40
感謝提供資訊，不過目前似乎還是沒辦法解決3.的問題：
找不到能定義在元素被撐開時把寬度撐成整數倍的CSS
※ 編輯: danny0838 (111.243.236.189), 03/02/2018 01:00:45
3F：→ Rplus: 第四個條件不是正常的 block 只能用 inline 處理 03/06 23:34
4F：→ Rplus: 但 inline 並無法讓你自由處理寬度， CSS 應該是無解 03/06 23:34