Html 横排菜单不换行

最新推荐文章于 2025-03-31 23:30:54 发布

原创最新推荐文章于 2025-03-31 23:30:54 发布

· 2.8k 阅读

1 ·

版权

文章标签：

#html

Html 专栏收录该内容

1 篇文章

订阅专栏

先上效果：

1.完整显示

2. 不完整显示

代码：

<!DOCTYPE html>
<html>
<head>
<style>
 
#pic_list
{
display:block;
white-space:nowrap;
width:100%;
overflow:auto;
}
#pic_list li
{
width:80px;
height:80px;
margin:3px;
background:red;
display:inline-block;
}
</style>
 
</head>
<div id="pic_list">
  <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>
  </ul>
</div>
</body>
</html>

总结：

一句话就是将去掉
float:left;
改成
display:inline-block;