Setting width of li problem

hi folks, i have couple of listed item’s which i want it wrap when reached a certain width. i m applying the width but its not happening. does li support widths? or is there is another work around. here is my css


ul.dockcaption{width:1200px; position:absolute; margin-top:30px; left:-20px;}
.dockcaption li{display:inline;margin:10px; margin-left:27px; width:100px}

i did tried to give one li a lot of text but it doesn’t wrap to next line when reached maximum width. am i missing something or li doesn’t work with width

It does work with width.

Did you try

display: block; 

instead of

display: inline; 

Try to read the definitions for display block and inline

W3schools

As the above poster indicted, display:inline elements (or elemenets with that generated display value) are inline elements. And as a result of them being inline, widths/heights do not apply to them. You could either do one of these options (note, that IE6/7 need a fix/hack for it to work)

  1. Change your setup to display:inline-block
  2. Change your setup to floats isntead of display:inline;

thanks. that help though i fail to achieve margin:0 auto; on text, i want text to center, for now i am using margin-left:50px; on dockcaption.li and it isn’t generic.
what i m trying to achieve here is when something is commented its image and its respective text, the other element slides in center to fill in the gap. i bet its confusing now but i wonder why i can’t get the text to be center of screen. here the link
P.S, don’t paste the whole code here just point me out as its personal and none indexded. thanks

If you want the text to be centered within the <li>, just give the parent text-align:center :slight_smile: