Geek Answers Handbook

Wrapping line height in list items

At http://steve.brettatkin.com/projects.php , when you hover over "Job", a submenu appears. The 4th and 5th links have text that wraps around. How to reduce the height of the line so that the second line of the link does not look like a new link?

I tried a combination of margin / padding / line-height on <li> but it does not work.

+4
source share
3 answers

Remove line-height from <a> inside <li> and place it instead of <li> , then use margin-top and margin-bottom for the margin between <li> and use line-height > for line-height single <li> s

(creating the hover state <a> in bold, it also makes the menu switch when it hangs because it is no longer suitable for 1 line)

+9
source

I usually solve this using x padding-left and -x text-indent. Thus, the text that is wrapped will be indented, but not the first line.

 #navigation li { padding-left: 10px; text-indent: -10px; }

If you want to change the height of the line, however, note that you will need some kind of margin from the previous elements, otherwise they just compress together. May be:

 #navigation li a { line-height: 1.2em; } /* a in (li next to li) = only second item and forward */ #navigation li+li a { margin-top: 10px; }
+5
source

The current line height for the drop-down lists in your menu is 25 pixels. Try reducing this to half:

 line-height: 14px;

You may need to place the bottom edge of the parent LI element, and then from 3px to meet the reduced line height of the link elements.

Adding this to the smudges should sort it:

 line-height: 14px; margin-bottom: 15px;

You might want to add the latter to LI and not to A.

0
source

More articles:


All Articles