CODEWITHSUNDEEP
htmlcss
Protonblast
Protonblast

Reputation: 81

how can i get a css table-cell link not to stretch the clickable area

I am setting up a banner of links at the top of the page that may or may not at some point we replaced with objects or images or differing sizes. so i am not using a list, nor a table, i am simply writing out the text and setting classes to split the objects up as if they were in a table.

<a href="#" class="left"> Link 1 </a> <a href="#" class="middle"> Link 2</a> <a href="#" class="right">Link 3</a>

.left{display:table-cell;min-width:150px;min-height:25px;}
.middle{display:table-cell;min-width:150px;min-height:25px;}
.right{display:table-cell;min-width:150px;min-height:25px;}

However, When i do this my link is maybe 50px of text but the clickable area is 125px. How can i get the link to be clickable ONLY on the link?

JS Fiddle here

Upvotes: 0

Views: 158

Answers (2)

Matt Pileggi
Matt Pileggi

Reputation: 7206

Use inline-block not table-cell. Set width to auto. Use margin if you need spacing

.left
{
    display:inline-block;
    width: auto;
    min-height:25px;
}
.middle
{
    display:inline-block;
    width: auto;
    margin: 0 2em;
    min-height:25px;
}
.right
{
    display: inline-block;
    width: auto;
    min-height:25px;
}

http://jsfiddle.net/FYELm/5/

Upvotes: 0

Feugy
Feugy

Reputation: 1918

You should nest your link into spans, and apply table-cell style in spans.

Something like this:

<span class="left"><a href="#">Link 1</a></span>
<span class="middle"><a href="#">Link 2</a></span>
<span class="right"><a href="#">Link 3</a></span>

See this forked fiddle

Upvotes: 1

Related Questions