HTML/CSS - 可变大小的中心导航栏答案

【问题标题】：HTML/CSS - Center nav bar of variable sizeHTML/CSS - 可变大小的中心导航栏
【发布时间】：2011-03-10 22:36:51
【问题描述】：

我将有一个导航栏，让用户可以对图片库进行排序。问题是导航栏的宽度会根据画廊的大小而变化，当我没有设置宽度时，我不能使用 margin: 0 auto;使菜单居中。（相反，每个都显示在画廊容器的左侧。）

这是html：

        <div id="nav_container">
            <div id="timeline_nav">
                <!--<a class="arrow left" />-->
                <a class="toggle"/>
                <a class="toggle"/>
                <a class="toggle"/>             
                <a class="toggle"/>
                <!--<a class="arrow right disabled" />-->
            </div>          
        </div>

还有css：

#nav_container { width:100%;height:20px; position:absolute; bottom:10px; background-color:#000;}
#timeline_nav { position:relative;margin:0 auto; }
#timeline_nav a { display:block; float:left; cursor:pointer; overflow:hidden; }
#timeline_nav a.toggle { width:4px; height:4px; padding:2px; margin:0 2px; background:url(http://images.apple.com/iphone/gallery/images/nav-ticks-20100607.png) 50% 0 no-repeat; }

有什么办法解决这个问题吗？

【问题讨论】：

你可以应用 display:inline-block，这会给它一个宽度（它不工作 n ie6 认为）.. 如果你使用 javascript 作为画廊，你可以以这种方式居中。

标签： html css navigation nav

【解决方案1】：

它会向左移动，因为您使用的是float: left;，这会使 achors 超出正常流程。您可能打算做的是将锚点设置为display: inline-block; 并将DIV 的内容居中。这应该在所有浏览器中都支持，因为 IE6 在最初内联的元素上支持 inline-block。

【讨论】：

【解决方案2】：

在这种情况下，我首选的方法是将容器元素设置为text-align: center;，将要居中的元素设置为display: inline-block;

您必须将居中元素设置为在 IE

#nav-container {
  text-align: center;
}

#timeline-nav {
  display: inline-block;
  *display: inline; /* IE6 and IE7 hack */
}

但我不是 Eric Meyer 所以......

【讨论】：

【解决方案3】：

您可以通过 Javascript 读取宽度并将其动态添加到您的#nav_container。之后您可以将 Container 与 margin: 0 auto; 对齐；

【讨论】：