can we assign width to li

Question

i have following html page with UL and LI, i try to assign width to each LI but can't see cay success

   <html>
   <head>
   <style type="text/css"> 

   ul
   { 
      overflow-x:hidden;
     white-space:nowrap; 
     height: 1em;
      width: 100%;
     } 

     li
  { 
    display:inline;
     padding-right:10px;
      }       
      </style>
    </head>
    <body>

    <ul> 
        <li style="width:100px">abcdefghijklmonpqrstuvwxyz</li> 
      <li>abcdefghijklmonpqrstuvwxyz</li> 
   <li>abcdefghijklmonpqrstuvwxyz</li> 
   <li>abcdefghijklmonpqrstuvwxyz</li> 
    <li>abcdefghijklmonpqrstuvwxyz</li> 
     <li>abcdefghijklmonpqrstuvwxyz</li> 
      <li>abcdefghijklmonpqrstuvwxyz</li> 
    </ul> 

    </body>
   </html>

because each of my LI has different width.

Thanks

score 24 · Answer 1 · answered Apr 23 '10 at 15:18

24

Try to replace your display:inline by display:inline-block

answered Apr 23 '10 at 15:18

Gregoire

24,219
6
46
73

this will do the trick, unless you're concerned with keeping your code XHTML compliant. inline-block is not supported completely cross browser: http://www.quirksmode.org/css/display.html#t03 – Anthony Shaw Apr 23 '10 at 15:30
+1 This should be the way to do what OP wants. But IE (6 and 7?) will only apply `display: inline-block;` to elements that are naturally inline (`span`, as an example), so one has to be careful with inline-block for pages that are meant to be compatible with *outdated* browsers. – ANeves Apr 23 '10 at 15:39

score 12 · Accepted Answer · answered Apr 23 '10 at 15:18

12

No, you can't assign width to anything that is displayed inline, which you've set your LI to be. Instead, you most often want to use display: block; float: left; which'll allow for setting width.

answered Apr 23 '10 at 15:18

David Hedlund

128,221
31
203
222

score 2 · Answer 3 · answered Apr 23 '10 at 15:29

2

Try this CSS

ul {
 white-space: nowrap;
 height: 1em;
 width: 100%;
}

li {
 list-style-type: none;
 width: 100px;
 overflow-x: auto; /* change to hidden if that's what you want */
 float: left;
 margin-right: 10px;
}

answered Apr 23 '10 at 15:29

Mottie

84,355
30
126
241

score 0 · Answer 4 · answered Apr 23 '10 at 15:18

0

You are giving the lis display: inline and widthdoesn't apply to inline elements. You'll need to use an alternative to position the elements beside each other such as floating them.

answered Apr 23 '10 at 15:18

RoToRa

37,635
12
69
105

score 0 · Answer 5 · edited May 23 '17 at 12:00

0

To provide more on the previous two answers, you can't specify the width inline, but you can check out an example on how to do it here

edited May 23 '17 at 12:00

Community

1
1

answered Apr 23 '10 at 15:24

Christin

1
2

score 0 · Answer 6 · answered Sep 22 '19 at 06:29

0

You'd have to work on your code because you can't assign widths to inline elements. But this can be solved by setting the display to block and by floating it.

answered Sep 22 '19 at 06:29

Dolapo Adelana

1
1

can we assign width to li

6 Answers6

Linked