如何使ul中li元素横向排列且不换行

Posted 2020-06-20 caribean

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使ul中li元素横向排列且不换行相关的知识，希望对你有一定的参考价值。

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

解决方法：主要是外面容器设置为white-space：nowrap；li设置为display：inline-block；而不是float：left；

<!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>

</ul>

</div>

</body>

</html>

以上是关于如何使ul中li元素横向排列且不换行的主要内容，如果未能解决你的问题，请参考以下文章