巴中热线

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 1482|回复: 0

[网页教程] html如何使网页ul中li元素文字横向排列且不换行

[复制链接]
发表于 2019-9-3 00:16:03 | 显示全部楼层 |阅读模式

注册巴中热线论坛,交好友享优惠,衣食住行吃喝玩乐尽在 BZHOT.com

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行?

解决方法:
主要是外面容器设置为white-space:nowrap;li设置为display:inline-block;而不是float:left;
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #pic_list
  6. {
  7. display:block;
  8. white-space:nowrap;
  9. width:500px;
  10. overflow:auto;
  11. }
  12. #pic_list li
  13. {
  14. width:80px;
  15. height:80px;
  16. margin:3px;
  17. background:red;
  18. display:inline-block;
  19. }
  20. </style>
  21. </head>
  22. <div id="pic_list">
  23.   <ul>
  24.     <li></li>
  25.     <li></li>
  26.     <li></li>
  27.   </ul>
  28. </div>
  29. </body>
  30. </html>
复制代码







上一篇:linux如何设置export环境变量 不输入程序详细路径直接执行命令方法
下一篇:让li在同一行只出现左右滚动条,滚动条透明,移动端就可以滑动
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

巴中热线 - 精彩推荐上一条 /1 下一条

快速回复 返回顶部 返回列表