html - 使 anchor 标记填充列表 显示 : table-cell

Question

所以这是我的问题，我试图让整个列表元素都可以点击，但是由于某些原因显示:table-cell anchor 标记的两边都有边距/边框，所以它不会填充列表元素的整个宽度。

我想使用 display:table-cell，这样我就可以均匀地分布在导航栏上。

HTML:

	<ul id="nav_list">
    	<li class="selected"><a href="search" id="menu_item" >Search</a></li>
        <li class=""><a href="suggest" id="menu_item" >Suggest</a></li>
        <li class=""><a href="report" id="menu_item" >Report Bug</a></li>
        <li class=""><a href="about" id="menu_item" >About</a></li>
        <li class=""><a href="help" id="menu_item" >Help</a></li>
    </ul>
</nav>

CSS

#container{
	margin: 0 auto;
	width: 500px;	
}
nav ul{
	list-style-type: none;
	background-color:#415d79;
	border-radius: 3px;
	margin: 0;
	padding: 0;
	height:auto;
	width: 100%;
	display: table;
	overflow:hidden;
}
nav li{
    display: table-cell;
	padding: 10px;
	color:#FFF;
	text-align: center;
	font-weight: 500;
	border-right: 2px solid #364F69;
	border-bottom: 3px solid #324961;
}
nav a{
	padding: 10px;
}

Answer 1

检查 fiddle https://jsfiddle.net/kk9qqq2f/

我已经稍微修改了您的代码，使单元格的整个区域都可以点击

CSS

nav li{
    display: table-cell;
    padding: 0; /* Changed padding from 10px to 0 */
    color:#FFF;
    text-align: center;
    font-weight: 500;
    border-right: 2px solid #364F69;
    border-bottom: 3px solid #324961;
}
nav a{
    padding: 10px;
    display:block; /* Added */
}