保证金自动梦魇

我尝试了所有我能想到的方式，但对于我的生活，我无法弄清楚为什么导航菜单不会居中。我试过文字对齐，边距自动，块显示......在父母和孩子。我相信这是一件非常简单的事情，但这开始会导致脱发。保证金自动梦魇

如果你想看到一些代码，这里的HTML：

<div id="navigation" class="col-full"> 

<ul id="main-nav" class="nav fl"> 

    <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://previews.tinygiantstudios.co.uk/">Home</a></li> 
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://previews.tinygiantstudios.co.uk/about-us/">About Us</a></li> 
    <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://previews.tinygiantstudios.co.uk/news/">News</a></li> 
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://previews.tinygiantstudios.co.uk/contact/">Contact</a></li> 

</ul> 
</div><!-- /#navigation -->

而且CSS

#navigation { 
    margin-bottom: 0px; 
    background-color: #131313; 
    border-top: 0px solid #DBDBDB; 
    border-bottom: 0px solid #DBDBDB; 
    border-left: 0px solid #DBDBDB; 
    border-right: 0px solid #DBDBDB; 
    border-radius: 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    font: 14px/14px sans-serif; 
    padding: 10px 0; 
} 

.nav { 
    z-index: 99; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    line-height: 1; 
    margin-left: 10px; 
} 

.fl { 
    float: left; 
} 

.nav li { 
    float: left; 
    width: auto; 
}

任何人都可以告诉我我失踪了什么？

谢谢，

来源

2011-12-05 Tiny Giant Studios

这是一个甜蜜的设计。只是想你想知道。 – Blender

将此代码添加到您的CSS：

.nav { 
    text-align: center; 
    width: 100%; 
} 

.nav li { 
    float: none; 
    display: inline-block; 

    /* IE7 should be pleased */ 
    zoom: 1; 
    *display: inline; 
}

它不会与旧版本的IE（inline-block）的工作，但会出现什么？

来源

2011-12-05 05:17:47 Blender

这似乎不适用于提供的测试页面，我不明白为什么它会反正。 –

真的吗？我使用Chrome的Inspector做到了这一点，它工作正常。 – Blender

是的，试过了 - 但它没有发生:( –

要设置边距为自动，则需要指定的宽度，并且显示元件作为块。

来源

2011-12-05 05:17:24 Brad

这就是我最初的想法，但似乎没有在提供的测试页面上工作。 –

@AndrewMarshall，我只是在Chrome中自己测试过，并且工作正常。 – Brad

嗯，我试过了，无法启动它。哦，可能意味着是时候让我的大脑休息和睡觉了。 –

将边距设置为零/自动仅适用于固定宽度的块元素。删除内联浮动以使其生效。

来源

2011-12-05 05:25:19 jmkeyes

不确定我在追踪 - 我尝试了你的建议（至少我认为我是）但它不工作...你有任何代码我应该尝试吗？ –

同上Brad说的。除非您在其他地方完成该块，否则不要使用内联浮动。设置列表，使'ul'的左/右边距设置为'auto'，并将其强制为固定宽度。 – jmkeyes

对于margin: 0 auto;你的元素定心必须display: block;，有一个固定的宽度不能与float浮动。

所以你需要从你的<ul>中删除fl类，并给它一个固定的宽度。

来源

2011-12-05 05:29:09 Strelok

您应该指定一个宽度#navigation或#main-nav

眼下#navigation跨越#wrapper整个宽度，从而不断斜面中心。宽度大约500px将解决这些问题。

如果你想中心主导航，而不是导航，您应该删除它的float:left;并给它一个固定的宽度和margin: auto;

来源

2011-12-05 05:33:03

保证金自动梦魇

回答

相关问题