Question

我有一个页面，其中div的宽度是固定的，并且是集中的。

和ul>li也需要通过左右自己的100% width偶数空格来集中。

在这个场景中，li是动态的，可以删除/编辑/添加。

所以我不知道我该怎样继续前进。

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

提前致谢

戴夫

Answer 1

我不完全确定我理解你的问题，但我认为你可能会追随的是this example I made for you。

在您发表评论后，我更新了this example您所追求的更多内容？

Answer 2

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

你搞乱了选择器： id="first"被引用为#first

我的建议是为这样均匀分布的菜单使用表：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>

或者您也可以编写一个javascript，如果您想坚持使用ul和lis，那么菜单项会均匀分布。

css ul li 100％利用固定div内的空间但动态li

2 个答案: