css ul li 100% utilization of space inside fixed div but dynamic li_问答_开发者

css ul li 100% utilization of space inside fixed div but dynamic li

开发者 https://www.devze.com 2023-02-08 07:12 出处：网络

I have one page in which the width of the div is fixed and it\'s centralized. and ul>li are also needed to be centralized by taking their own 100% width even spaces on left and right.

相关专题：css

I have one page in which the width of the div is fixed and it's centralized.

and ul>li are also needed to be centralized by taking their own 100% width even spaces on left and right.

in this situtation, li are dynamic and they can delete开发者_Python百科d/edited/added.

so I don't know how should I proceed further.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">    
     <head>        
         <meta http-equiv="content-type" content="text/html; charset=utf-8"/>          
         <link rel="stylesheet" type="text/css"  />
         <title>Untitled</title>
         <style>
         .first {text-align:center;width:980px}
         .first ul { float:left;width:100%;text-align:center;float:left; }
         .first ul li { list-style-type:none;float:left; display:inline-block }
         </style>
     </head>  
     <body style="margin:0 auto">  
         <div id="first">     
               <ul>       
                   <li>first li</li>      
                   <li>second li</li>      
                   <li>third li</li>      
                   <li>4th li</li>       
                   <li>5th li</li>     
              </ul>  
         </div>  
    </body>  
</html>

Thanks in advance

Dave

I am not entirely sure I understoon your question but I think what you might be after is in this example I made for you.

After your comment, I updated, is this example more what you're after?

#first{
    width:100%
}
#first ul {
    width:100%;
}
#first ul li  {
    list-style-type:none;
    float:left;
}

You are messing up selectors: id="first" is referenced like #first

My advice is to user a table for such evenly spaced menu: http://jsfiddle.net/inti/GvXzf/

<table style="width: 100%"><tr>
    <td>first li</td>      
    <td>second li</td>      
    <td>third li</td>      
    <td>4th li</td>       
    <td>5th li</td> 
</tr></table>

Or you can write a javascript too, that makes the menu items evenly spaced, if you want to stick with ul and lis.