css - Stop hyperlink inheriting div's width? -

hi have hyperlinks inside div display:block. problem hyperlinks length when clicked equal div's width. how make hyperlink's clicked length equal text of hyperlink without specifying width each link ? jsfiddle here

use

#links {clear:left;float:left}

the float allow link sized, , clear prevent links being on same line.

you may need add clear:left #links container depending on design.

edit

a little tutorial since asked:

there 2 types of elements, inline , block. inline ones show in line no breaks. block elements take whole line , move next one.

inline elements can't have width or height styled. blocks can.

<a> inline element. setting display block, tell make new line every time.

float gives elements inline behavior bump next eachother , flow on onto next line. float allows style width/height of element. it's sort of mix between two.

the clear attribute stops inline floating , goes normal block behavior (new lines every time).

you won't need display:block , float: @ same time.

another solution involve display:inline-block, not supported in several browsers isn't encouraged (although find pretty handy).