CODEWITHSUNDEEP
css
John Ayers
John Ayers

Reputation: 519

CSS links background color width

How can you set a link inside of a li element to where its background is longer that the actual text and they are all even with one another?

Example

CSS

.popoutsidebar li { margin-bottom: 20px; padding: 5px; }
.popoutsidebar li a { background-color: #E5E5E5; color: #B94A48; padding: 10px; border-radius: 5px; }
.popoutsidebar li a:hover { background-color: #B94A48; color: #FFFFFF; text-decoration: none; }

Upvotes: 0

Views: 1858

Answers (1)

Brian Lewis
Brian Lewis

Reputation: 5729

<a>nchor tags are inline by default. Try something like this:

.popoutsidebar li a { display:block }

The display property lets you define how a certain HTML element should be displayed.

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

http://quirksmode.org/css/css2/display.html

Upvotes: 3

Related Questions