CODEWITHSUNDEEP
csshyperlinkhtml-lists
Ross
Ross

Reputation: 17987

CSS menu auto width - links with multiple words line breaking

Here's a live demo for your convenience: http://jsfiddle.net/Lr6NQ/2/

On ul#navigation ul, if there is an explicit width, the links appear on their own "line" as intended. However, as the links have varying widths, I'd rather leave it as "auto" so the <ul> isn't really wide for lists with short content.

How can I prevent the link from line breaking, without setting an explicit width. If the link is one word, I get the desired effect, but with multiple words, the <ul> is only as wide as the longest word.

Upvotes: 2

Views: 4303

Answers (2)

robbrit
robbrit

Reputation: 17960

You can use non-breaking spaces. Instead of spaces in the link, use &nbsp;.

Upvotes: 3

Brad
Brad

Reputation: 15577

ul#navigation li {
    white-space:nowrap; /* <-- ADDED */
    float:left;
    width:auto;
    padding:10px;
    margin-right:10px;
    position:relative;
}

If you want to shorten long lines add a <br /> in the anchor.

Upvotes: 10

Related Questions