Question

我的屏幕顶部有一个带有我的页面的菜单，但它在屏幕的左侧以相当多的像素运行。我正在运行我的网站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/

Answer 1

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

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

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

HTML菜单运行屏幕

1 个答案: