CSS+HTML ul li列表原點(diǎn)如何相連？

案一:

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)定位在指定位置上

來源：千鋒web前端

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

ul li 橫排居中排列的方法

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

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

ul li橫排的方法

將ul無序列表元素中的列表項(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，具體可見下方的綜合實(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全棧：

笨鳥工具-璞玉天成，大器晚成

速生成 Html5 骨架

在 Html 文件中輸入 html:5 按下回車鍵，可快速生成 HTML5 頁面模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

html:5

父子關(guān)系快速構(gòu)建

在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車鍵，可快速生成父子關(guān)系的結(jié)構(gòu)：

<div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

父子關(guān)系構(gòu)建

多個(gè)相同標(biāo)簽

重復(fù)元素: 使用 * 加上數(shù)字來創(chuàng)建多個(gè)相同的標(biāo)簽。例如，p*3 后按 Tab 會(huì)產(chǎn)生三個(gè) <p> 段落標(biāo)簽。

<p></p>
<p></p>
<p></p>

類與 ID 的添加

類: 在標(biāo)簽名后加 . 再加上類名。如 div.container 生成帶有類 container 的 <div> 。

<div class="container"></div>

ID: 使用 # 加上 ID 名。如 div#main 生成 ID 為 main 的 <div> 。

<div id="main"></div>

屬性快速插入

屬性賦值: 在標(biāo)簽后用方括號 [attr=value] 插入屬性。例如，a[href=https://example.com]。

<a href="https://example.com"></a>

組合使用

復(fù)合示例: 結(jié)合上述技巧，可以創(chuàng)建復(fù)雜結(jié)構(gòu)。比如，nav>ul>li.item$*4>a[href=#]{Item $} 會(huì)生成一個(gè)導(dǎo)航欄，包含 4 個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)都是一個(gè)鏈接，鏈接文本分別為 "Item 1" 到 "Item 4"，且每個(gè)鏈接的 href 屬性指向不同的 ID。

<nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>

自定義 snippets（代碼片段）

高級結(jié)構(gòu): 如果有特定的復(fù)雜結(jié)構(gòu)經(jīng)常使用，可以創(chuàng)建自定義的 Emmet snippets。轉(zhuǎn)到 "文件" > "首選項(xiàng)" > "用戶代碼片段"，選擇或創(chuàng)建 HTML 片段文件，定義自己的縮寫和展開結(jié)構(gòu)。

Emmet 命令

Emmet: Wrap with Abbreviation: 選中現(xiàn)有代碼后，使用此命令（通過命令面板 Ctrl+Shift+P / Cmd+Shift+P 調(diào)出并搜索 “Wrap with Abbreviation” ），可以快速將選中內(nèi)容包裹在指定標(biāo)簽內(nèi)。

在線咨詢

上一篇：js隨機(jī)數(shù)Math.round的用法詳解
下一篇：Web前端哪個(gè)培訓(xùn)機(jī)構(gòu)好?千鋒教育用實(shí)力說話

您的項(xiàng)目需求

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

整合營銷服務(wù)商