我有三个链接<a>
有背景的元素,但链接的一半不可点击,因为背景与文本重叠。有谁知道解决方案?html元素背景使链接无法点击
这里是我做了什么
<html>
<head>
<style>
li
{ list-style-type:none;
list-style:none;
position:relative;
height:100px;
}
#middle
{ width:350px;
background:url("images/middle.png");
left:405px;
height:250px;
padding-top:50px;
background-size:100%;
}
#left
{ left:275px;
width:240px;
height:150px;
padding:150px 60px 0 0;
background:url("images/left.png");
background-size:100%;
}
#right
{ left:580px;
width:235px;
height:150px;
padding:150px 0 0 70px;
background:url("images/right.png");
background-size:100%;
}
#test
{ height:325px;
}
.Item
{ position:absolute;
font-size:33px;
float:left;
margin:15px;
font-family: Georgia, Times, "Times New Roman", serif;
text-align:center;
}
</style>
</head>
<body>
<ul id="test">
<li id="left" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
<li id="middle" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
<li id="right" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
</ul>
</body>
</html>
HTML似乎被打破。您有几个关闭''标签,但没有开放''标签来匹配它们。 – Boaz 2013-05-09 12:23:46
@Boaz是正确的,通过http://validator.w3.org/#validate_by_input运行它;纠正这些错误将有助于长远。 – 2013-05-09 12:28:42
你为什么要休息。限制你的href大小会更有意义,增加z-index不会解决这个问题,你有一些主要的编码问题,如Boaz所说的。 – Cam 2013-05-09 12:52:06