html中让 ul 的多个 li 在一行内显示

2024-04-27 14:25:21

字体：大中小

来源：转载

供稿：网友

html中让 ul 的多个 li 在一行内显示

2015-07-13 18:44 by 半梦半醒。, ... 阅读, ... 评论, 收藏, 编辑

有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/CSS">*{padding: 0;margin-bottom:0;border: 0;}.box{width: 640px;height: 50px;overflow-x: scroll;overflow-y: hidden;}ul{display:inline;white-space: nowrap;}ul li{padding: 10px 20px;display: inline-block;background:pink;white-space:nowrap;}</style></head><body><div class="box"><ul><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li><li>所有li都在一行显示</li></ul></div></body></html>

效果如下图：