居中未知宽度的UL菜单，溢出问题 [英] Centering a UL menu of unknown width, overflow issues

问题描述

我创建了一个简单的演示，我想要完成，但基本上，当我调整大小（更小）我得到滚动条，我想删除。

I created a simplified demo of what I'm looking to accomplish but basically, when I resize (smaller) I get scrollbars I would like to remove.

添加

http://jsfiddle.net/aKUAP/

HTML

<nav>
    <ul>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
    </ul>
</nav>
<p>Looking for a way to hide the scrollbars created when the page is resized smaller. Using overflow:hidden on the nav element will hide any sub-menus used downt he line.</p>

CSS

nav {
    position: relative;
    zoom: 1;    
    border-top: 1px solid #ccc;
    border-bottom: 3px solid #ccc;    
    float: left;
    width: 100%;
    /*overflow: hidden; */
}
ul {
    clear: left;
    float: left;
    position: relative;
    left: 50%;
    text-align: center;
}
ul li {
    float: left;
    position: relative;
    right: 50%;
}
ul a {
    padding: 5px;
    font-size: 11px;
    display: block;   
}
p {
    text-align: center;
    padding: 30px;
}

也许有一个更好的技术，宽度？

Maybe there's a better technique for centering a UL menu of unknown items at 100% width?

推荐答案

您可以切换到使用 overflow-x：hidden ：< a href =http://jsfiddle.net/aKUAP/2/ =nofollow> http://jsfiddle.net/aKUAP/2/

也许有一个更好的技术用于以100％宽度将未知
项目的UL菜单居中定位？

Maybe there's a better technique for centering a UL menu of unknown items at 100% width?

是的，有。切换到 ul 和 text-align：center上的 display：inline-block nav ： http：/ /jsfiddle.net/aKUAP/3/

Yes, there is. Switch to using display: inline-block on the ul, and text-align: center on nav: http://jsfiddle.net/aKUAP/3/

这篇关于居中未知宽度的UL菜单，溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！