can we assign width to li_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-28 11:51 出处：网络

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

相关专题：css

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>
    &l开发者_开发问答t;/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

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

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.

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

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.

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

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.