2010-04-25 18 views
1

如何列出给定显示的标记:block并将其左移,并置于无序列表中。如何在无序列表中居中列表标签?

的HTML:

 <div id="navigation"> 
      <ul> 
       <li>Home</li> 
       <li>About Us</li> 
       <li>Contact</li> 
       <li>News</li> 
       <li>Events</li> 
       <li>Video</li> 
       <li>Photos</li> 
      </ul> 
     </div><!-- navigation --> 

的CSS:

#navigation { 
    border: 3px solid orange; 
    overflow: hidden; 
} 
#navigation ul { 
    list-style-type: none; 
    text-align: center; 
} 
#navigation ul li { 
    float: left; 
    display: block; 
    padding: 10px 8px; 
    border: 1px solid green; 
} 

回答

0

,而不是显示:块,使用:

#navigation ul li { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    padding: 10px 8px; 
    border: 1px solid green; 
} 
+0

这种运作良好,但有两个问题: 1 。这在所有主流浏览器上都兼容吗? 2.它会在列表项之间创建一个小的边距,以任何方式摆脱它。 – Jack 2010-04-25 01:39:07

+0

当然。只需为您的#导航ul添加保证金:说 保证金:10px; – Puaka 2010-04-25 02:11:37

+0

请注意,您也可以为您的li添加保证金,应该修复IE – Puaka 2010-04-25 02:14:17