使清单项目链接

我有一个问题，要求在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

使清单项目链接

回答

相关问题