作者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/cn.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