Html 将宽度未知的UL菜单居中，溢出问题

我创建了一个简化的演示，演示了我希望完成的任务，但基本上，当我调整大小（更小）时，我会得到想要删除的滚动条

添加溢出：隐藏到nav元素可以工作…直到我想添加子菜单

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>

---

也许有一种更好的方法可以将未知项目的UL菜单置于100%宽度的中心位置

您可以切换到使用

溢出-x:hidden

：

也许有一种更好的方法可以将未知的UL菜单居中 100%宽度的项目

---

是的，有。切换到使用

ul

上的

display:inline block

，以及

nav

上的

text align:center

：

哇。。。我忘记了x/y约束溢出。我也会尝试你的第二种方法，只要它能在主流浏览器中使用。

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;
}