CODEWITHSUNDEEP
htmlcsshtml-listsanchorhref
Lizzeiy
Lizzeiy

Reputation: 426

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>

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

Upvotes: 0

Views: 1069

Answers (2)

Kawinesh S K
Kawinesh S K

Reputation: 3220

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

Use the above CSS

DEMO

Upvotes: 0

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

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

Upvotes: 1

Related Questions