HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

TML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li 橫排居中排列的方法

無(wú)序列表的列表項(xiàng)默認(rèn)情況下是豎著排的，因?yàn)閘i元素是塊級(jí)元素，會(huì)自動(dòng)分行。那如果要將列表的列表項(xiàng)進(jìn)行橫排，比用無(wú)序列表ul元素定義一個(gè)導(dǎo)航條。那該怎么辦呢？這當(dāng)中有三個(gè)應(yīng)當(dāng)被解決的東西，一個(gè)是橫排本身，另一個(gè)就是應(yīng)當(dāng)把無(wú)序列表項(xiàng)的圓點(diǎn)去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：

ul li橫排的方法

將ul無(wú)序列表元素中的列表項(xiàng)li元素的display屬性設(shè)置成inline或inline-block，個(gè)人比較常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要將ul元素包含于一個(gè)div元素，并將div元素的text-align屬性設(shè)置為center即可將ul水平居中。除此之外，因?yàn)閡l的列表默認(rèn)情況下是有左內(nèi)邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內(nèi)邊距padding-left設(shè)置為0，具體可見(jiàn)下方的綜合實(shí)例。

垂直居中方法：為包含ul元素的div元素設(shè)置寬度width和高度height（實(shí)際上導(dǎo)航條一般也需要有寬度和高度的設(shè)置），然后將ul的line-height屬性設(shè)置為父元素的高度height即可。

去掉圓點(diǎn)的方法

將ul元素的list-style屬性設(shè)置為none即可。

HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li 橫排居中排列綜合實(shí)例代碼，及在線編輯器

<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+CSS+JS實(shí)例在線編輯器：

HTML ul li 橫排居中排列的方法，綜合實(shí)例在線 - HTML教程

實(shí)例代碼解析

如上代碼，一定要將ul的左內(nèi)邊距padding-left設(shè)置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運(yùn)行看一看效果。

python全棧：

笨鳥(niǎo)工具-璞玉天成，大器晚成

案一:

html

	<ul>
		<li class="active">
			<em></em>
			<p><b>參與考試《第一期模擬考試》</b></p>
			<p><time>3小時(shí)50分鐘</time></p>
		</li>
		<li>
			<em></em>
			<p><b>學(xué)習(xí)文檔《LDO電路設(shè)計(jì)規(guī)范》</b></p>
			<p><time>3小時(shí)50分鐘</time></p>
		</li>
		<li>
			<em></em>
			<p><b>學(xué)習(xí)文檔《LDO電路設(shè)計(jì)規(guī)范》</b></p>
			<p><time>3小時(shí)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;}

實(shí)現(xiàn)原理:

給每一個(gè)li一個(gè)左邊框,em標(biāo)簽使用樣式寫成原點(diǎn),采用定位將原點(diǎn)定位到邊框線上

方案二:

Html

<ul>
		<li class="active">
			<img src="2.png" alt="" />
			<p><b>參與考試《第一期模擬考試》</b></p>
			<p><time>3小時(shí)50分鐘</time></p>
		</li>
		<li>
			<img src="1.png" alt="" />
			<p><b>學(xué)習(xí)文檔《LDO電路設(shè)計(jì)規(guī)范》</b></p>
			<p><time>3小時(shí)50分鐘</time></p>
		</li>
		<li>
			<img src="1.png" alt="" />
			<p><b>學(xué)習(xí)文檔《LDO電路設(shè)計(jì)規(guī)范》</b></p>
			<p><time>3小時(shí)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;}

實(shí)現(xiàn)原理:

給li一個(gè)左邊框,同時(shí)在結(jié)構(gòu)中添加img作為原點(diǎn),使用定位將圖片原點(diǎn)定位在指定位置上

來(lái)源：千鋒web前端

商左側(cè)商品分類菜單實(shí)現(xiàn)

無(wú)論是pc端還是手機(jī)端，都有類似左側(cè)分類，點(diǎn)擊后右側(cè)切換內(nèi)容的功能頁(yè)面。

要想實(shí)現(xiàn)這個(gè)功能，首先第一步是要掌握左右布局的方法。

左右布局

推薦使用flex彈性布局

.parent {
 display: flex;
}
.left {
 width: 200px;
 height: 100%;
 background-color: red;
}
.right {
 display: flex;
 flex: 1;
 height: 100%;
 background-color: blue;
}

也可以使用absolute定位，通過(guò)left調(diào)整位置。

之后渲染左側(cè)的菜單

<ul id="J_category" class="item">
 <li v-for="item in category" @click="clickme(item.id)">{{ item.text }}</li>
</ul>

在菜單中添加點(diǎn)擊事件，點(diǎn)擊事件中傳入相關(guān)的參數(shù)用于獲取右側(cè)內(nèi)容。

在點(diǎn)擊事件中處理右側(cè)的顯示內(nèi)容，完整代碼如下：

<!DOCTYPE html>
<head>
 <title>左側(cè)商品分類菜單</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">美容護(hù)膚</div>
 <div class='sub-item' style='display:none;' id="d">珠寶飾品</div>
 <div class='sub-item' style='display:none;' id="e">運(yùn)動(dòng)戶外</div>
 <div class='sub-item' style='display:none;' id="f">手機(jī)數(shù)碼</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: "美容護(hù)膚",
 id: "c"
 }, {
 text: "珠寶飾品",
 id: "d"
 }, {
 text: "運(yùn)動(dòng)戶外",
 id: "e"
 }, {
 text: "手機(jī)數(shù)碼",
 id: "f"
 }, {
 text: "居家生活",
 id: "g"
 }, {
 text: "家電家裝",
 id: "h"
 }, {
 text: "母嬰用品",
 id: "i"
 }, {
 text: "食品保健",
 id: "j"
 }]
 },
 mounted: function () {
 this.init();
 },
 methods: {
 init() {
 // TODO 初始化數(shù)據(jù)
 },
 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>

轉(zhuǎn)評(píng)贊就是最大的鼓勵(lì)

在線咨詢

上一篇：vue v-html動(dòng)態(tài)生成的html怎么加樣式/事件
下一篇：HTML 布局

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

ul li 橫排居中排列的方法

ul li橫排的方法

ul水平居中和垂直居中的方法

去掉圓點(diǎn)的方法

ul li 橫排居中排列綜合實(shí)例代碼，及在線編輯器

HTML+CSS+JS實(shí)例在線編輯器：

實(shí)例代碼解析

python全棧：

商左側(cè)商品分類菜單實(shí)現(xiàn)

左右布局

您的項(xiàng)目需求