div中ul居中显示,ul中的li可以分行显示

发布网友 发布时间：2022-04-22 06:48

我来回答

共4个回答

热心网友 时间：2022-04-22 08:18

我知道一个最最最简单的方法，
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<br/>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>

加个换行标签就行了啊， 给分， 这个不给分就不人道了， 哈哈

热心网友 时间：2022-04-22 09:36

<style>
.box { width:600px;}
.box ul{ margin: 0 auto; width:500px; list-style:none;}
.box li {float:left; margin:12px 5px 0 5px; display:inline; width:90px; height:100px; }
</style>

<div class='box'>
<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>
<li>10</li>
</ul>
</div>
在CSS里改一下 LI的宽就可以控制每行几个了....

热心网友 时间：2022-04-22 11:10

<style>
div{
margin:0px auto;
width:这里你来设定
}
ul{
margin:0px auto;
width:这里你来设定
}

这里用程序判断
现在循环到第多少条
用这个数字除10是否有余数
如果没有就循环一条空的li并且li的样式为.ten
ul li.ten{
margin-top:20px;
}
</style>

<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

热心网友 时间：2022-04-22 13:02

不浮动又想一行显示，那好像只能用display改变li的模型结构了，inline-block或inline都可以

至于居中，办法多多，比如div设置text居中，等等，具体问题具体分析