一个ul如何让里面的li显示成3列

时间:2022-05-05 20:37:12
大家有谁对css很熟悉的吗,我要把下面变成三列显示应该怎么做?
<ul>
<li>阳光私募看</li>
<li>·A股市场依</li>
<li>·国投瑞银:</li>
<li>·后奥运时代</li>
<li>·上投摩根:</li>
</ul>

7 个解决方案

#1


将li  display:inline或者float:left;

#2


<ul>
<li style="float:left">
<ul>
<li>11111</li>
<li>22222</li>
</ul>
</li>/*第一列*/

<li style="float:left">
<ul>
<li>33333</li>
<li>444444</li>

</ul></li>/*第二列*/

<li style="float:left">
<ul>
<li>55555</li>
<li>66666</li>

</ul></li>/*第三列*/

</ul>/*全列表*/

#3


设置 ul 和 li 的宽度

<html>
<head>
<title>无标题文档</title>
<style>
ul{
width:300px;
}
li{
width:90px;
display:inline;
}
</style>
<script>

</script>
</head>
 
<body>
<ul> 
<li>阳光私募看</li> 
<li>A股市场依 </li> 
<li>国投瑞银:</li> 
<li>后奥运时代</li> 
<li>上投摩根:</li> 
</ul>
</body>
</html>

#4


可以设置LI为浮动元素,然后适当的设置宽度以显示成三列就可以了

#5


<style>
ul{width:100%;}
li{width:33%;float:left;display:block;}
</style>

#6


float:left是关键

#7


将li  display:inline或者float:left;
二者均可

#1


将li  display:inline或者float:left;

#2


<ul>
<li style="float:left">
<ul>
<li>11111</li>
<li>22222</li>
</ul>
</li>/*第一列*/

<li style="float:left">
<ul>
<li>33333</li>
<li>444444</li>

</ul></li>/*第二列*/

<li style="float:left">
<ul>
<li>55555</li>
<li>66666</li>

</ul></li>/*第三列*/

</ul>/*全列表*/

#3


设置 ul 和 li 的宽度

<html>
<head>
<title>无标题文档</title>
<style>
ul{
width:300px;
}
li{
width:90px;
display:inline;
}
</style>
<script>

</script>
</head>
 
<body>
<ul> 
<li>阳光私募看</li> 
<li>A股市场依 </li> 
<li>国投瑞银:</li> 
<li>后奥运时代</li> 
<li>上投摩根:</li> 
</ul>
</body>
</html>

#4


可以设置LI为浮动元素,然后适当的设置宽度以显示成三列就可以了

#5


<style>
ul{width:100%;}
li{width:33%;float:left;display:block;}
</style>

#6


float:left是关键

#7


将li  display:inline或者float:left;
二者均可