Question

所以我希望整个<li>可以点击，而不仅仅是文字。

代码包含在jsfiddle中。

感谢响应的任何人：）

Answer 1

制作你的主播display:block并将填充从li

移到锚点

.menu li a {
  display:block;
  padding: 8px;
}

Updated Fiddle

display:block将a转换为块级元素，占用其父级的整个不动产。

＆＃13;

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    margin-bottom: 7px;
    background-color: #2D74B4;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    text-align: center;
}
.menu li:hover {
    background-color: #0099cc;
}
.menu li a {
    display:block;
    padding: 8px;
}

a:link {color: #ffffff; text-decoration: none;}
a:visited {color: #ffffff; text-decoration: none;}
a:hover {color: #ffffff; text-decoration: none;}
a:active {color: #ffffff; text-decoration: none;}

＆＃13;

<div class="menu">
	<ul>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
		<li><a href="#">test</a></li>
	</ul>
  </div>

＆＃13;

Answer 2

使用block“封闭”按钮，填充应该在里面。

a { display:block; padding: 8px; } 
a:link {color: #ffffff; text-decoration: none;} 
a:visited {color: #ffffff; text-decoration: none;} 
a:hover {color: #ffffff; text-decoration: none;} 
a:active {color: #ffffff; text-decoration: none;}

轻松自在！

列表中的导航菜单。如何使整个li成为可点击的链接，而不仅仅是文本

2 个答案: