关于css 布局 如何设置成三列显示

来源：百度知道 编辑：UC知道 时间：2024/05/17 12:56:10
如何设置成三列显示 源css代码:
--------------------------------------------------------------
.text_list_1{ background:url(images/bg_model.gif) no-repeat left -34px;}
.text_list_1 li{ padding-left:24px; line-height:200%;}
----------------------------------------------------------------

源效果:
1
2
3
4
5
6
7
8
9

如何设置成:
147
258
369
1\2楼效果失败
1楼用的是HTML 我不打算用这个
2楼用的我试了,可是效果没有变

ul{
margin:0px;
padding:0px;
}
li{
float:left;
width:76px;/*这里要看你装的容器有多宽，宽度要能装下横向3个，但要小于4个的宽度，注意这里：这个宽度要加上你的设定的padding-left,所以li的实际宽度是100px*/
}

例子:
<div style="width:320px">/*这里建议div的宽度要大于3个LI的宽度*/
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>

100分拿来！

.text_list_1{ background:url(images/bg_model.gif) no-repeat left -34px;}
.text_list_1 ul{float:left;}
.text_list_1 li{ padding-left:24px; line-height:200%;}

<div class="text_list_1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</l