CODEWITHSUNDEEP
htmlcss
air
air

Reputation: 6264

can we assign width to li

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

Upvotes: 16

Views: 62421

Answers (6)

Dolapo Adelana
Dolapo Adelana

Reputation: 1

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.

Upvotes: 0

Mottie
Mottie

Reputation: 86413

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;
}

Upvotes: 2

Christin
Christin

Reputation: 1

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

Upvotes: 0

Gregoire
Gregoire

Reputation: 24832

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

Upvotes: 24

David Hedlund
David Hedlund

Reputation: 129792

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.

Upvotes: 12

RoToRa
RoToRa

Reputation: 38390

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.

Upvotes: 0

Related Questions