使 <a> 锚标记填充列表 <li> 显示：table-cell

Question

所以这是我的问题，我试图让整个列表元素可以点击，但由于某些原因显示：table-cell 锚点的任一侧都有一个 margin/border标记，因此它不会填满列表元素的整个宽度。

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

Answer 2

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

Use the above CSS

DEMO

使 <a> 锚标记填充列表 <li> 显示：table-cell

Make <a> anchor tag fill list <li> with display: table-cell

html

css

html-lists

anchor

href