HTML 菜单在屏幕外运行答案

【问题标题】：HTML Menu Runs Off ScreenHTML 菜单在屏幕外运行
【发布时间】：2014-02-21 22:11:28
【问题描述】：

我的页面顶部有一个菜单，但它超出了屏幕左侧很多像素。我在 10 个网格（10 个网格部分，每个部分 10% 宽）上运行我的网站，但它已经超过了 100%。

CSS：

ul {
    background: #000000;
    margin: 0 auto;
}

ul li {
    padding: 10px 20px;
    font-weight: bold;
    float: left;
    color: #0f7e25;
}

ul li a {
    color: #0f7e25;
}

ul li a:hover {
    color: #FFFFFF;
}

HTML：

<header>
    <ul class="grid_10">
        <li><a href="#">Front Door Web Design</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Let's Talk</a></li>
    </ul>

JSFIDDLE： http://jsfiddle.net/P3F3Y/

【问题讨论】：

你能在jsfiddle.net上提供一个例子
使用您提供的代码，它运行良好，所以我们无法使用提供的代码重现相同的东西，因为它不足以解决问题，要么在 jsfiddle 上分享一个演示，要么分享更多代码
尝试使用您提供的代码（有一些小修复）：jsfiddle.net/Y47U2
如果你有 10% 设置元素的宽度。所有填充和边距都是额外的。因此，如果您有 10 个 10% 宽的元素并且每个元素都有一些填充和边距，那么所有元素的总空间将大于 10%
@user2915402 溢出隐藏不是菜单的解决方案，因为您想查看所有菜单项：D

标签： html css

【解决方案1】：

填充将列表扩展到页面宽度之外。您需要减少 li 上的填充

ul li {
   padding-right:20px;
    font-weight: bold;
    float: left;
    color: #0f7e25;
}

小提琴：http://jsfiddle.net/ankur1990/ab3pF/

【讨论】：