HTML/CSS - 可变大小的中心导航栏
我将有一个导航栏，让用户可以对图片库进行排序。问题是导航栏宽度会根据图库的大小而变化，当我不设置宽度时，我无法使用 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; }
有任何解决此问题的想法吗？
I'm going to have a nav bar that lets a user sort through a gallery of pictures. The problem is the nav bar width is going to vary based on the size of the gallery, and when I don't set a width I can't use margin: 0 auto; to center the menu. (Instead, every shows up on the left side of the gallery container.)
Here's the 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>
And the 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; }
Any ideas how to fix this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
它会向左移动，因为您使用的是
float: left;，这会将锚点置于正常流之外。您可能想要做的是将锚点设置为display: inline-block;并将DIV的内容居中。所有浏览器都应该支持这一点，因为 IE6 支持对最初内联的元素使用inline-block。It is going to the left because you are using
float: left;, which brings the achors outside of normal flow. What you probably meant to do was set the anchors todisplay: inline-block;and center the contents of theDIV. This should be supported in all browsers as IE6 supportsinline-blockon elements that are originally inline.在这种情况下，我的首选方法是将容器元素设置为
text-align: center;并将您想要居中的元素设置为display: inline-block;您必须将居中元素设置为在 IE 中显示“内联”< 8；
但我不是埃里克·迈耶所以...
My preferred approach in this case is to set the container element to
text-align: center;and the element you want centered todisplay: inline-block;You will have to set the centered element to display 'inline' in IE < 8;
But i'm no Eric Meyer so...
您可以通过 Javascript 读取宽度并将其动态添加到您的 #nav_container 中。
之后，您可以将容器与 margin: 0 auto; 对齐；
You could read the width by Javascript and add it dynamic to your #nav_container.
Afterwards you can align the Container with margin: 0 auto;