Stop hyperlink inheriting div's width?

Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ? JSFiddle here



#links a {clear:left;float:left}

The float will allow the link to be sized, and the clear will prevent the links from being on the same line.

You may need to add a clear:left to the #links container depending on your design.


A little tutorial since you asked:

There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.

Inline elements can't have their width or height styled. Blocks can.

<a> is an inline element. By setting its display to block, you tell it to make a new line every time.

float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.

The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).

You won't need display:block and float: at the same time.

Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).

Need Your Help

Rails create a method accessible via both the model and controller

ruby-on-rails ruby

Is there anyway to create a function I can call both in the model and controller? I have a function that grabs an array of files and strips the extension off and want to validate against the list.