我创建了一个我希望完成的简化演示,但基本上,当我调整(变小)大小时,我得到了我想要删除的滚动条。
添加 overflow: hidden 到 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>
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;
}
也许有更好的技术可以将未知元素的 UL 菜单居中显示为 100% 宽度?
最佳答案
你可以切换到使用 overflow-x: hidden
: http://jsfiddle.net/aKUAP/2/
Maybe there's a better technique for centering a UL menu of unknown items at 100% width?
是的,有。在 ul
上切换到使用 display: inline-block
,在 nav
上切换到使用 text-align: center
:http://jsfiddle.net/aKUAP/3/
关于html - 居中未知宽度的 UL 菜单,溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8779258/