TML ul li 横排居中排列的方法,三步骤及实例
无序列表的列表项默认情况下是竖着排的,因为li元素是块级元素,会自动分行。那如果要将列表的列表项进行横排,比用无序列表ul元素定义一个导航条。那该怎么办呢?这当中有三个应当被解决的东西,一个是横排本身,另一个就是应当把无序列表项的圆点去掉,第三则是让ul定义的列表居中显示,包括水平居中和垂直居中。方法如下:
HTML ul li 横排居中排列的方法,三步骤及实例
将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block,个人比较常用的是后者:
ul li{display:inline-block;}
水平居中方法:只要将ul元素包含于一个div元素,并将div元素的text-align属性设置为center即可将ul水平居中。除此之外,因为ul的列表默认情况下是有左内边距的,所以,为了能够让列表能够更好地水平居中,需要将ul的左内边距padding-left设置为0,具体可见下方的综合实例。
垂直居中方法:为包含ul元素的div元素设置宽度width和高度height(实际上导航条一般也需要有宽度和高度的设置),然后将ul的line-height属性设置为父元素的高度height即可。
将ul元素的list-style属性设置为none即可。
HTML ul li 横排居中排列的方法,三步骤及实例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>
HTML ul li 横排居中排列的方法,综合实例在线 - HTML教程
如上代码,一定要将ul的左内边距padding-left设置为0,否则ul列表的“水平居中”将偏向右边,大家可以将.e2中的padding-left删除掉,然后再在线运行看一看效果。
笨鸟工具-璞玉天成,大器晚成
案一:
html
<ul> <li class="active"> <em></em> <p><b>参与考试《第一期模拟考试》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <em></em> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <em></em> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> </ul>
Css:
*{margin:0;padding:0;} ul{ margin:100px; padding:0; list-style: none; } ul li{ position:relative; padding-left: 30px; padding-bottom: 20px; border-left:2px #999 solid; } ul li em{ position:absolute; left:-5px; top:0; width:8px; height:8px;border-radius:8px;background:#999; } ul li.active em{ background: red;} ul li p{margin:0;} ul li time{color:#999;font-size:12px;}
实现原理:
给每一个li一个左边框,em标签使用样式写成原点,采用定位将原点定位到边框线上
方案二:
Html
<ul> <li class="active"> <img src="2.png" alt="" /> <p><b>参与考试《第一期模拟考试》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <img src="1.png" alt="" /> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <img src="1.png" alt="" /> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> </ul>
Css
*{margin:0;padding:0;} ul{ margin:100px; padding:0; list-style: none; } ul li{ position:relative; padding-left: 30px; padding-bottom: 20px; border-left:2px #999 solid; } ul li img{ position:absolute; left:-5px; top:0; width:10px; height:10px; border-radius:10px; background:#999; } ul li p{margin:0;} ul li time{color:#999;font-size:12px;}
实现原理:
给li一个左边框,同时在结构中添加img作为原点,使用定位将图片原点定位在指定位置上
来源:千锋web前端
无论是pc端还是手机端,都有类似左侧分类,点击后右侧切换内容的功能页面。
要想实现这个功能,首先第一步是要掌握左右布局的方法。
推荐使用flex弹性布局
.parent { display: flex; } .left { width: 200px; height: 100%; background-color: red; } .right { display: flex; flex: 1; height: 100%; background-color: blue; }
也可以使用absolute定位,通过left调整位置。
之后渲染左侧的菜单
<ul id="J_category" class="item"> <li v-for="item in category" @click="clickme(item.id)">{{ item.text }}</li> </ul>
在菜单中添加点击事件,点击事件中传入相关的参数用于获取右侧内容。
在点击事件中处理右侧的显示内容,完整代码如下:
<!DOCTYPE html> <head> <title>左侧商品分类菜单</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <style>html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000} .sub-col{position:relative;z-index:999;} .category{width:230px;border:1px solid #8A0E00;} .category h3 {height:30px;line-height:30px;text-indent:15px;background:#A91319;color:#fff;} .category ul li{height:30px;line-height:30px;text-indent:35px;background:#FFF8F6 url(arrow-r.png) no-repeat 205px center;border-bottom:1px solid #ECECEC;border-top:1px solid #fff;cursor:pointer;color:#A71F37;} .category ul li:hover{background-color:#8A0E00;color:#fff;} .pop-category{border:2px solid #8A0E00;background:#FDF5F5;position:absolute;left:200px;top:40px;z-index:1000;} .pop-category .sub-item{width:390px;height:350px;} </style> <div class="category" id="test"> <h3>所有商品分类</h3> <ul id="J_category" class="item"> <li v-for="item in category" @click="clickme(item.id)">{{ item.text }}</li> </ul> <div id="J_popCategory" class="pop-category"> <div class='sub-item' style='display:none;' id="a">潮流服饰</div> <div class='sub-item' style='display:none;' id="b">精品鞋包</div> <div class='sub-item' style='display:none;' id="c">美容护肤</div> <div class='sub-item' style='display:none;' id="d">珠宝饰品</div> <div class='sub-item' style='display:none;' id="e">运动户外</div> <div class='sub-item' style='display:none;' id="f">手机数码</div> <div class='sub-item' style='display:none;' id="g">居家生活</div> <div class='sub-item' style='display:none;' id="h">家电家装</div> <div class='sub-item' style='display:none;' id="i">母婴用品</div> <div class='sub-item' style='display:none;' id="j">食品保健</div> </div> </div> <script> new Vue({ el: '#test', data: { category: [{ text: "潮流服饰", id: "a" }, { text: "精品鞋包", id: "b" }, { text: "美容护肤", id: "c" }, { text: "珠宝饰品", id: "d" }, { text: "运动户外", id: "e" }, { text: "手机数码", id: "f" }, { text: "居家生活", id: "g" }, { text: "家电家装", id: "h" }, { text: "母婴用品", id: "i" }, { text: "食品保健", id: "j" }] }, mounted: function () { this.init(); }, methods: { init() { // TODO 初始化数据 }, clickme(id) { var subItems = document.getElementsByClassName('sub-item', 'div'); for (var j = 0; j < subItems.length; j++) { subItems[j].style.display = 'none'; } const ele = document.getElementById(id) console.log(id, ele) ele.style.display = 'block'; } } }) </script> </body> </html>
转评赞就是最大的鼓励
*请认真填写需求信息,我们会在24小时内与您取得联系。