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

So here is my issue, I am trying to make the whole list element click able, but for some reason with display: table-cell there is a margin/border either side of the anchor tag, so it does not fill the entire width of the list element.

I want to use display:table-cell so my fit evenly across the navbar.


	<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>


Checkout the fiddle

I have modified your code a bit to make the entire area of the cell click-able


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

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

Use the above CSS


Need Your Help

How to find and use the nearest unused field name in MongoDB?

javascript mongodb

I have a users document and a user can add their own fields into this document. The fields are unnamed by default (because the user creates them by only clicking a button) but can be renamed by the...

Two Spinner menu items in ActionBar width

android width android-actionbar spinner menuitem

I've manually built two spinners in the Action bar, by creating at first two menu items in the main.xml file. With the line

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.