Geek Answers Handbook

Is auto-adjustment of the width in the text?

Is it possible to automatically adjust the width of the <li> tag to the width of the text contained in CSS?

I am developing a website that uses custom CMS (and I do not have access to the code), so I am limited in options as far as design is concerned.

Javascript solutions that will work with the <li tag without having to edit any list properties will also work.

+5
source share
9 answers

As @willoller already said, the li element is a block-level element, but besides floating it, you can also use:

li {
    display: inline;
}
+6
source

<li> - , , .

"" , :

li {
    float:left;
    clear:left;
}

, .

, <li> , :

ul {
    clear: left;  /* I like to put the clear on the <ul> */
}
li {
    float: left;
}


li {
    display: inline
}

inline , <span> .

+14

EDIT: , - .

- , :

ul {
    white-space: pre-line;
    margin: -25px 0 0;   /* to compensate the pre-line down-shift */ 
}
ul li {
    display: inline-block;
}

CSS, .

+2

min-width width. IE 6 width , .

+1

, :

  • "float: left" <ul>
  • <ul> <div>
+1

display: inline; CSS <ul> , .

+1

<li> , JavaScript, , , , .

0

You can use em rather than pixels to indicate the width of your element. The em character is roughly equivalent to the width of the letter "m" in the default font. Play with a short number of characters in your li until you have an em width that will be attractive.

0
source 
ul { display: inline }

will solve all your problems at once.

0
source

More articles:


All Articles