html中ul元素水平排列问题

最新推荐文章于 2022-06-17 16:14:25 发布

cs408

最新推荐文章于 2022-06-17 16:14:25 发布

阅读量8.4k

点赞数 3

分类专栏： css 文章标签： html ul li

本文链接：https://blog.csdn.net/cs408/article/details/49840255

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>

#pic_list
{
display:block;
white-space:nowrap;
width:500px;
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>

关键是对ul元素设置display:block;white-space:nowrap;
对li元素的宽度和高度进行设置，当设置百分比的时候可以达到均分的目的