前端代码，html中的ul + li 如何设置横向排列呢？
HTML:
<div class="column" style="padding-left: 15px;padding-right: 15px;padding-bottom:60px;"> <ul id="rotaDeptUl"> <li>肾内科一病室</li> <li>心血管内科二病室</li> <li>心血管内科三病室</li> <li>心血管内科四病室</li> <li>呼吸内科五病室</li> <li>呼吸内科六病室</li> <li>呼吸内科RICU</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>普外科二十五病室</li> <li>神经外科、胸外、眼、耳鼻喉科</li> </ul> </div>
CSS:
#rotaDeptUl li{
border: 1px solid;
float: left;
width: 19.2%;
height: 34px;
line-height: 34px;
overflow: hidden;
text-align: center;
margin: 5px 0;
background-color: white;
margin-right: 1%;
}
#rotaDeptUl li:nth-child(5n){
margin-right:0;
}运行示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style type="text/css">
#rotaDeptUl li{
border: 1px solid;
float: left;
width: 19%;
height: 34px;
line-height: 34px;
overflow: hidden;
text-align: center;
margin: 5px 0;
background-color: white;
margin-right: 1%;
}
#rotaDeptUl li:nth-child(5n){
margin-right:0;
}
</style>
</head>
<body>
<div class="column" style="padding-left: 15px;padding-right: 15px;padding-bottom:60px;">
<ul id="rotaDeptUl">
<li>肾内科一病室</li>
<li>心血管内科二病室</li>
<li>心血管内科三病室</li>
<li>心血管内科四病室</li>
<li>呼吸内科五病室</li>
<li>呼吸内科六病室</li>
<li>呼吸内科RICU</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>普外科二十五病室</li>
<li>神经外科、胸外、眼、耳鼻喉科</li>
</ul>
</div>
</body>
</html>可将上述代码复制，点击在线运行查看效果
还没有评论，来说两句吧...