使用 display: table-cell 制作 <a> 锚标记填充列表 <li>答案

【问题标题】：Make <a> anchor tag fill list <li> with display: table-cell使用 display: table-cell 制作 <a> 锚标记填充列表 <li>
【发布时间】：2015-05-04 17:15:49
【问题描述】：

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

我想使用 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;
}

【问题讨论】：

删除li 填充并将li a 填充增加到足够

标签： html css html-lists anchor href

【解决方案1】：

检查小提琴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 */
}

【讨论】：

干杯！我以为我已经尝试了一切。谢谢:)
将display:block 添加到锚标记并删除列表项上的padding 也对我有用。谢谢。
@Fletch 乐于提供帮助 :)

【解决方案2】：

nav a {
  width: 100%;
  padding: 10px;
  height: 100%;
  display: inline-block;
}

使用上面的 CSS

DEMO

【讨论】：