居中我的浮动ul

我似乎无法让我的菜单正确居中。任何人都可以看到问题吗？居中我的浮动ul

ul#navigation { 
     float: left; 
     margin: 0 auto; 
     padding: 0; 
     list-style-type: none; 
     min-width: 100px; 
     background: #003d4c; 
     padding-bottom: 15px; 
     text-align: center; 
    } 

    ul#navigation li { 

     border: 1px black solid; 
     min-width: 100px; 
     background-color: white; 
     list-style-type: none; 
     display: inline-block; 
    } 

    ul.sub_navigation { 
     position: absolute; 
     display: none; 
    } 

    ul.sub_navigation li { 
     clear: both; 
    } 

    a, a:active, a:visited { 
     display: block; 
     padding: 10px; 
    } 

    #header{ 
     text-align: center; 
     padding: 10px 20px; 
    }

这里的HTML：

<div id="container"> 
    <div id="header"> 
     <br /> 
     <ul id="navigation"> 
      <li class="dropdown"><a href="#"></a> 
       <ul class="sub_navigation"> 
        <li><a href="#">Sub Navigation 1</a></li> 
        <li><a href="#">Sub Navigation 2</a></li> 
        <li><a href="#">Sub Navigation 3</a></li> 
       </ul> 
      </li> 
      ...

来源

2012-08-04 kwikness

请提供完整的代码示例。 – j08691 2012-08-04 19:34:45

我决定使用的解决方案是用这个CSS包住主UL在一个div：

.menuContainer { 
    display: table; 
    margin: auto; 
}

来源

2012-08-06 01:57:30 kwikness

围绕你的导航是一种常见的，但不是一个简单的问题，特别是如果你希望它是跨浏览器comaptible。我总是使用非常好的技术，在这个page上有很好的解释。

Basicly它归结为：

你漂浮的div容器左侧，给它100％的宽度和位置相对
你浮起你UL左边，并给它一个相对现在的位置是左的50％
您浮动贵丽左侧，并给它一个位置相对权的50％

退房的链接，一个thorrow解释与例子

来源

2012-08-04 19:48:30 Pevara

居中我的浮动ul

回答

相关问题