子级绝对定位也受父级宽度的影响

2019-11-02 18:00:07

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .txt{ display: inline-block; height:30px; line-height: 30px; border:1px solid #498fd3; background: #276AB0; outline: none; } .close{ position: relative; display: inline-block; } .close>.icon{ display: inline-block; width: 30px; height: 30px; line-height: 30px; border:1px solid #498fd3; background: #276AB0; } .close>.span{ display: inline-block; position: absolute; top: 30px; left: 0; height: 40px; /*white-space: nowrap;*/ } .block{ display: inline-block; } </style> </head> <body> <div class="block"> <button class="txt">fffffffff</button> <div class="close"> <span class="icon">×</span> <span class="span">啊对方噶啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span> </div> </div> </body>

</html>

想要文字在一行显示把white-space放开，但是只能是文字，显示不受宽度影响

上一篇：Web应用的性能优化思路——找到瓶颈

下一篇：这里是最全的15个设计风格总结！