貓城
BLACKCAT CASTLE

如何讓選單<li></li>整塊都具有連結效果

   26 VIEWS
如何讓選單<li></li>整塊都具有連結效果

想要讓整個區塊都有連結(鏈接/鏈結/Link)效果的做法有很多,用<a></a>直接包起來是最快的做法,比如說讓<a>在<li>外面即可:<a><li></li></a>,但有時這會與其他設計好的 CSS 有所衝突,造成部分 CSS 無法正常顯示,或是其他順序上的問題,導致我們無法讓<a></a>放在最外面,這時候其實只要在需要的區塊中加上下列的 CSS 即可。

例如選單的<li>就加上下列 CSS:

li a {
display: block;
}

display: block;的意思就是讓元素成為區塊,套用此 CSS 的標籤將會成為一個區塊,同時也會自動換行,相當於div的作用。而選單的<li>跟<a>的組合最常透過此 CSS 去控制連結的範圍,因為<a>屬於行內元素,本身無法設定長寬,透過display: block的設置就能控制寬度與長度,整個區塊也就都能連結了。

如果不是選單<li>而是用於<div>,同時希望區塊有連結但不要換行,就改用display: inline-block;即可,inline-block是結合inline不換行的特性以及block可設定長寬的區塊特性。

範例

只有文字有連結: 整個<li>都具有連結: 整個<li>都具有連結的 CODE 範本:
<style type="text/css">
.test_menu ul {
	list-style: none; /* 移除清單樣式 */
	width: 300px; /* 設定寬度 */
}
.test_menu li {
	border: 1px solid #777; /* 外框線 */
	background: #222; /* 背景色 */
	padding:1px 3px; /* 框內距 */
}
.test_menu li a {
	display: block; /* 設定為區塊 */
}
</style>
<nav class="test_menu">
	<ul>
		<li>
			<a href="#">選單</a>
		</li>
	</ul>
</nav>


時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS