CSS，如何将水平菜单和子菜单居中? [英] CSS, How do I center horizontal menu and submenu?

问题描述

我正在学习CSS，但我不知道菜单和子菜单的中心.我正在使用margin:auto或margin-left和margin-right为auto，但它不起作用.任何帮助，将不胜感激.谢谢

i am learning css and i don't know center a menu and submenu. i am using margin: auto or margin-left and margin-right to auto but it is not working. Any help would be appreciated. Thanks

HTML

    <div id="menu">                          
    <ul id="nav">                          
        <li><a href="#">item1</a>            
            <ul>                               
                <li><a href="">subitem1</a></li> 
            <li><a href="">subitem2</a></li> 
            <li><a href="">subitem3</a></li> 
           </ul>                             
        </li>                                
        <li><a href="#">item2</a>            
            <ul>                               
                <li><a href="">subitem1</a></li> 
              <li><a href="">subitem2</a></li> 
                <li><a href="">subitem3</a></li> 
            <li><a href="">subitem4</a></li> 
            <li><a href="">subitem5</a></li> 
            <li><a href="">subitem6</a></li> 
            </ul>                            
        </li>                                
    </ul>                                  
</div>                                   

CSS

    #menu {                  
  clear: none;           
  width: 960px;          
}                        
ul#nav {                 
  width: 960px;          
  margin: 0;             
  padding: 0;            
  list-style: none;      
}                        
ul#nav li {              
    float: left;           
    display: inline-block; 
}                        
ul#nav li a {            
  line-height: 40px;     
    padding: 0 30px;       
  text-align: center;    
}                        
ul#nav ul {              
    display: none;         
}                        
ul#nav li:hover > ul {   
  position: absolute;    
    display: block;        
  margin: auto;          
    width: 100%;           
}                        

fiddle http://jsfiddle.net/davidgonzalo/ZzaDY

推荐答案

这是您想要的结果吗? http://jsfiddle.net/shaunp/ZzaDY/1/

Is this your desired outcome? http://jsfiddle.net/shaunp/ZzaDY/1/

(请记住，提琴窗口很小，因此您可能有一个滚动条-内容确实居中)

(Keep in mind the fiddle window is small so you may have a scrollbar - the content is indeed centered)

1. 将 text-align:center; 添加到 ul#nav
2. 摆脱 float:left; 从 ul#nav li
3. 从 ul#nav li:hover>中删除 position:absolute; ul

CSS

#menu {
  clear: none;
  width: 960px;
}
ul#nav {
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align:center;
}
ul#nav li {
    display: inline-block;  
}
ul#nav li a {
  line-height: 40px;
    padding: 0 30px;
}
ul#nav ul {
    display: none;
}
ul#nav li:hover > ul {
  display: block;
  margin: auto;
  width: 100%;
}

这篇关于CSS，如何将水平菜单和子菜单居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！