Question

我想要一些有效的代码，没有<a><li></li></a>
这是问题：
http://jsfiddle.net/BquwS/

我也必须在这里添加代码，因为我不能只询问jsfiddle-link-only问题，所以这就是html：

<nav id="menu">
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>

这就是我遇到的问题。

#menu {
    width: 180px;
    padding: 0 10px 10px 10px;
    float:left;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:15px;
}
#menu ul{
    list-style-type:none;
}
#menu li{
    height:15px;
    background-color:#404468;
    margin:20px 0 20px 0;
    /*border-image*/
    border: 1px solid transparent;
    border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    border-width:17px 17px 17px 17px;
    -moz-border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    -webkit-border-image:url("http://users.atw.hu/darksoul90/egyeb/border.png") 45 45 45 45 stretch stretch;
    border-image-outset: 10px;
}
#menu li:nth-child(odd){

    -ms-transform:rotate(1deg); 
    -webkit-transform:rotate(1deg);
    transform:rotate(1deg);
}
#menu li:nth-child(even){
    -ms-transform:rotate(-1deg); 
    -webkit-transform:rotate(-1deg);
    transform:rotate(-1deg);
}
#menu a {
    display:block;
    height:100%;
    width:100%;
    color:#b7c4d8;
    text-decoration:none;
}
#menu a:hover {
    color:#Ff0;
}

Answer 1

由于边框较粗，链接的可点击区域较窄。您可以扩展链接的可点击区域，但这需要绝对定位。

http://jsfiddle.net/89Rv8/7/

http://jsfiddle.net/89Rv8/7/show

#menu li {
  position: relative;
}
#menu a {
  color: #B7C4D8;
  display: block;
  left: -17px;
  line-height: 30px;
  min-height: 33px;
  position: absolute;
  text-decoration: none;
  top: -17px;
  width: 141px;
}

Answer 2

<nav id="menu">
    <ul>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
    </ul>
</nav>

你应该删除＆＃34;＃＆＃34;在href上。如果＃在您的href上，如果您单击它，它将保留在页面上并且没有任何反应。如果单击按钮，请将其更改为您想要的正确链接。

如何在具有边框图像的整个<li>上建立链接？</li>

2 个答案: