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.

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>

Answers


Checkout the fiddle https://jsfiddle.net/kk9qqq2f/

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

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 */
}

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

Use the above CSS

DEMO


Need Your Help

Does it make sense to run numpy and matplotlib code with threads?

multithreading python-3.x numpy matplotlib

I wrote a Python program for each of my lab experiments to do data analysis (numpy, scipy) and plotting (matplotlib). Currently, I use the matplotlib.pyplot state machine interface which is probabl...

access parent form's cleaned_data from inline form clean()

django django-forms cleaned-data

I have a main form that has an inline-form. Is it possible to access the main form's cleaned_data from the inline-form's clean function?