CODEWITHSUNDEEP
javascriptjqueryhtmlcss
garethdn
garethdn

Reputation: 12373

Long list item creates unwanted indent

This problem is difficult to describe so i created a jsfiddle. You can see that the final item in the menu sticks out to the right, unlike the other menu items. This happens with other menu items if they take up more than one line.

http://jsfiddle.net/V82un/

Upvotes: 0

Views: 107

Answers (3)

kei
kei

Reputation: 20521

How about wrapping the text in a span with following css rule:

display:inline-block;
max-width:190px;

Demo

Upvotes: 0

Olly Hodgson
Olly Hodgson

Reputation: 15795

This is because the <a> element is display: inline; by default, so the border only appears at the end of the second line. Change #sidebar_all_pages a to display: block and the problem is solved. It unmasks another one though: The negative margin on #sidebar_all_pages li is too big. Reduce it to -10px to solve that one.

Upvotes: 2

Nicolas Stamm
Nicolas Stamm

Reputation: 123

text-align: right means the text is, well, right-aligned. This means thet the right edge of everey line of text will stick to the right inner edge of its container.

Upvotes: 0

Related Questions