作者dream1124 (全新开始)
看板Web_Design
标题[问题] 请问网页左边文字为什麽会推宽格子大小
时间Sat Aug 22 23:29:30 2015
晚安
我会写 javascript, 知道 html 标签的用法, 但不太熟 CSS 和排版
想请问大家方便帮忙看一下为什麽这个静态网页的左边 Executed Gradle Task
那个 table 区域明明就在 sidebar 的 div 里面，却会因为 table li > a
里面的文字太长而向右凸出去？
https://drive.google.com/file/d/0B8d7WRHnGxbRZlg1M2JoYVR3Z0E/view
为了让这个区域不会因为文字很长而凸出去，我有试着在 jsfiddle 上面
尽量模拟网页的情况，使用 word-wrap:break-word; 把锚点里的文字断行，
结果在下面连结中。
http://jsfiddle.net/f2pkhde6/
但令我不解的是为什麽一样的技巧拿去原本的网页就完全没用呢？
就算设定 table 的样式包含 word-wrap:break-word 还是没效，
请问是什麽 CSS 的排版设计让 table 的宽度不动如山呢？
谢谢大家的解答
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.231.184.90
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1440257374.A.96F.html
※ 编辑: dream1124 (61.231.184.90), 08/23/2015 01:04:48
1F：→ superpai: 你就 td 里面再夹一层 div上 word-wrap:break-word 08/23 05:56
2F：→ miau: 你没有模拟网页的情况啊XD 跟网页一样加上 table 的话也是爆 08/23 11:07
3F：→ miau: 在 a 加上 word-break: break-all; 即可达成你的需求 08/23 11:07
4F：→ miau: 另外你的 li 外层没有包 ul 或 ol，是不正确的 html 写法喔 08/23 11:08
谢谢两位, 问题就差不多解决了
原本网页的 li 外面没有加上 ul 或 ol，我猜是因为原作者想让清单的黑点尽量靠左。
如果套上 ul 或 ol 的话，黑点左边还会多出一些 padding。
其实这也是我现在想解决的问题，请问要怎麽做才能让清单的黑点
在侧边栏、甚至整个页面在不同萤幕上时都能靠近清单那个区域左边框呢？
我知道 padding-left 然後填比例可以做到，不知道这能不能适用大小不同的萤幕。
http://jsfiddle.net/f2pkhde6/2/
※ 编辑: dream1124 (118.160.80.226), 08/23/2015 14:24:10