Welcome to WebmasterWorld Guest from 54.167.129.169

Forum Moderators: not2easy

Message Too Old, No Replies

Make my display:inline-block fit each link individually

     
1:31 pm on Oct 14, 2012 (gmt 0)

Junior Member

joined:Feb 23, 2012
posts: 91
votes: 0


My header links are different sizes. What Ďam I missing so each button will fit each individual link thatís a different size perfectly?

<style type="text/css">
a.button{
display:inline-block;
width:90px;
height:40px;
padding:5px;
border:1px #000000 solid;
text-align:center;
text-decoration:none;
color:#666666;
background:url(button_bg.png);
}
a.button:hover{
background:url(button_bg_hover.png);
text-decoration:none;
}
</style>

Thanks in advance,
S
10:18 pm on Oct 14, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13268
votes: 363


What am I missing so each button will fit each individual link thatís a different size perfectly?

width:90px;
height:40px;

? ? ?

Like the man said: Your mouth says "fit, fit" but your code says "same size, same size".
11:04 am on Oct 15, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi Scotty, the point Lucy is making is that the browsers are obeying the width you have set for each <a>. If you want the links to expand when the link text is longer, consider min-width instead.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members