使清單項目鏈接

我有一個問題，要求在html中的列表項。我尋找答案，但沒有找到一個適合我的問題。使清單項目鏈接

ul { 
 
\t margin: 0 auto; 
 
\t padding: 0px; 
 
\t list-style-type: none; 
 
} 
 

 
li { 
 
\t width: 25%; 
 
\t display: inline; 
 
\t float: left; 
 
\t text-align: center; 
 
} 
 

 
a { 
 
\t display: block; 
 
\t font-size: 32px; 
 
\t width: 140px; 
 
\t background-color: #A0A0A0; 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
\t color: #282828; 
 
} 
 

 
.navbardiv { 
 
\t margin: 0px; 
 
\t background-color: #A0A0A0; 
 
\t height: 50px; 
 
} 
 

 
a:link,a:visited { 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
} 
 

 
a:hover,a:active { 
 
\t background-color: #B8B8B8; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css"> 
 
</head> 
 
<body> 
 
<div class="navbardiv"> 
 
<ul> 
 
<li><a href="Page1.html">Home</a></li> 
 
<li><a href="Page2.html">Forum</a></li> 
 
<li><a href="Page3.html">Videos</a></li> 
 
<li><a href="Page4.html">Contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

所以我的問題是什麼，如何使整個列表項的鏈接，我已經嘗試了一個例子使他們的鏈接中，在他們的段落但沒」工作。我想保留鏈接的字體和大小，這就是爲什麼我沒有找到答案。所以如果你可以請回答我的問題，將不勝感激。

在此先感謝！

來源

2014-12-05 azy19

你目前的解決方案有什麼問題？你不想在你的鏈接之間存在差距？ – Zeta 2014-12-05 07:45:07

@Zeta出於某種原因，我無法讓段落看起來像鏈接。 – azy19 2014-12-05 07:46:34

@Zeta是的我不想在我的鏈接之間出現空隙。 – azy19 2014-12-05 07:53:53

最簡單的解決方案（也就是說，代碼變化最小的那個）我認爲將a標記的width更改爲100%。但是，您應該考慮將HTML結構更改爲使用nav標記，如其他答案中的建議。

ul { 
 
\t margin: 0 auto; 
 
\t padding: 0px; 
 
\t list-style-type: none; 
 
} 
 

 
li { 
 
\t width: 25%; 
 
\t display: inline; 
 
\t float: left; 
 
\t text-align: center; 
 
} 
 

 
a { 
 
\t display: block; 
 
\t font-size: 32px; 
 
\t width: 100%; 
 
\t background-color: #A0A0A0; 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
\t color: #282828; 
 
} 
 

 
.navbardiv { 
 
\t margin: 0px; 
 
\t background-color: #A0A0A0; 
 
\t height: 50px; 
 
} 
 

 
a:link,a:visited { 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
} 
 

 
a:hover,a:active { 
 
\t background-color: #B8B8B8; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css"> 
 
</head> 
 
<body> 
 
<div class="navbardiv"> 
 
<ul> 
 
<li><a href="Page1.html">Home</a></li> 
 
<li><a href="Page2.html">Forum</a></li> 
 
<li><a href="Page3.html">Videos</a></li> 
 
<li><a href="Page4.html">Contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

來源

2014-12-05 08:04:53 icke

這個答案與最佳實踐相差甚遠。 :( – Zaqx 2014-12-05 17:20:32

是的，這就是爲什麼我寫了一個'nav'標籤的原因（正如你在回答中所建議的那樣）。 – icke 2014-12-05 20:26:24

您的解決方案如下。

只是出於好奇，你在哪裏學習HTML/CSS？

* { margin:0; padding:0 } 
 

 
nav { 
 
    background: grey; 
 
} 
 

 
nav a { 
 
    color: initial; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 4px; 
 
    margin: 10px 0; 
 
} 
 

 
nav a:hover { 
 
    background: lightgrey; 
 
}

<nav> 
 
    <a href="Page1.html">Home</a> 
 
    <a href="Page2.html">Forum</a> 
 
    <a href="Page3.html">Videos</a> 
 
    <a href="Page4.html">Contact</a> 
 
</nav>

來源

2014-12-05 08:05:03 Zaqx

我現在在教自己，但是在我上大學的那一年，我的目標是一個編程課程，幸運的是，在我的城市裏有一個，我和我的幾個朋友通常會在休息和代碼的網站上，所以這就是爲什麼我很糟糕，但是每個人都必須從某個地方開始，對吧？ – azy19 2014-12-05 08:29:03

這真是太棒了，重新學習，查看https://dash.generalassemb.ly/我見過的用於爲初學者教授HTML/CSS的最佳網站，它是免費的，你只需要創建一個賬戶。你將學到很多東西，並且有更好的瞭解這些概念。祝你好運:) – Zaqx 2014-12-05 08:38:23

只需添加寬度：100％;就像在你的{}選擇器中一樣

a { 
    display: block; 
    font-size: 32px; 
    width: 100%; /* instead of 140px; */ 
    background-color: #A0A0A0; 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    color: #282828; 
}

來源

2014-12-05 08:12:10

使清單項目鏈接

回答

相關問題