[問題] 用CSS排版自動適應寬度的inline項目表
如題，假設我的 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
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.243.236.189
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1519849344.A.3F7.html
※ 編輯: danny0838 (111.243.236.189), 03/01/2018 04:34:16
推
03/01 14:40,
6年前
, 1F
03/01 14:40, 1F
→
03/01 14:40,
6年前
, 2F
03/01 14:40, 2F
感謝提供資訊，不過目前似乎還是沒辦法解決3.的問題：
找不到能定義在元素被撐開時把寬度撐成整數倍的CSS
※ 編輯: danny0838 (111.243.236.189), 03/02/2018 01:00:45
→
03/06 23:34,
6年前
, 3F
03/06 23:34, 3F
→
03/06 23:34,
6年前
, 4F
03/06 23:34, 4F