Question

CSS：

body {
    background-image: url("../images/ITWorld.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    font-family: sans-serif;
}

p {
    font-size: 22px;
}

#navbar {
    display: inline;
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

.listitem {
    padding: 7px;
    display: inline;
    border: 3px solid black;
}

a:hover {
    color: white;
}

.reference {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
}

#overviewpara {
    width: 800px;
}

.referenceli {
    padding: 5px;
}

HTML：

<ul>
    <li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>
    <li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li>
</ul>

我的问题是，当我将鼠标悬停在我的参考页面上的超链接时，他们不会在正确的区域做出反应。例如，我将链接5px链接上方，它不会高，或者我将在链接上，但它将无法正常工作。对不起凌乱的HTML。

Answer 1

您应该在标签5px上填充，而不是列表项。

.referenceli {
    padding: 5px;
}

应该是

.reference {
    padding: 5px;
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

同时从a标签中删除50px填充：您最好将该大小（50px）应用于列表项的边距：

.reference {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
}

应该是

.reference {
    font-size: 22px;
    padding: 5px; /*So you will have a hover effect 5px below and above the link*/
}

.referenceli {

    margin: 50px 0px;
}

Answer 2

将填充顶部和底部更改为5px：

.reference {
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}

<强>小提琴： http://jsfiddle.net/uNpbk/

Answer 3

将填充顶部和底部更改为5px：

.reference 
{
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Answer 4

试一试。我认为你需要设置div而不是li标签。我在参考和referenceli中添加了一些边框。将边框添加到代码中以查看样式效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<style>
body {
    background-image: url("../images/ITWorld.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    font-family: sans-serif;
}

p {
    font-size: 22px;
}

#navbar {
    display: inline;
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

.listitem {
    padding: 7px;
    display: inline;
    border: 3px solid black;
}

a:hover {
    color: red;
    font-weight:bold;
}

.reference {
    font-size: 22px;
    padding:10px 0 10px 0;
    border:green solid 1px;
}

#overviewpara {
    width: 800px;
}

div.referenceli{
   padding:20px 0 0 0;
   border:red 1px solid;
}
</style>
<ul>
  <div class="referenceli"><!--USE DIV TO FOCUS CSS -->
    <li><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm
    </a></li><!-- END LI -->
  </div><!-- END REFERENCELI -->
  <div class="referenceli">
    <li><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011
    </a></li><!-- END LI -->
  </div><!-- END REFERENCELI -->
</body>
</html>

一个href在右侧区域无法点击

4 个答案: