前端html ul+li 设置横向排列

原创  郑建华   2020-01-02   66人阅读  0 条评论
摘要:

    前端代码,html中的ul + li 如何设置横向排列呢?HTML:<div class="column" style="padding-left: 15px;padding-right: 15px;padding-bottom:60px;"> <ul id="rotaDeptUl">   

    前端代码,html中的ul + li 如何设置横向排列呢?

image.png

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>

可将上述代码复制,点击在线运行查看效果

在线运行

本文地址:https://www.zjh336.cn/?id=136
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?