1

我将有一个导航栏，让用户可以通过图片库进行排序。问题是导航栏的宽度会根据画廊的大小而变化，当我没有设置宽度时，我不能使用 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; }

任何想法如何解决这一问题？

4

3 回答 3

3

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

于 2011-03-10T22:40:43.007 回答
0

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

您必须将居中元素设置为在 IE < 8 中显示“内联”；

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

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

但我不是 Eric Meyer 所以...

于 2011-03-10T22:41:47.280 回答
0

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

于 2011-03-10T22:44:39.337 回答