Question

我因为我遇到的问题而生气，我真的无法理解正在发生的事情。

我有一个#topo部分，其中包含768px。

然后我有一个768px的菜单div。

徽标是我图像中的黄色div，菜单是我图像中的灰色div。

你能理解为什么他们有相同的，但是在我的页面中，正如你在我的图片中看到的那样他们有不同的，然后我的页面出现在滚动条右边????

我有这个jsffidle：

http://jsfiddle.net/ra3zc/10/

（但在jsfiddle发生相反的情况下，我的菜单显得小于我的div“topo”）

我的HTML：

<header id="topo">
    <span id="logo">
        <a href="index.php" style="margin-left:350px;">LOGO</a>
    </span>
</header>

<section id="menu-container">
    <nav id="menu">
        <ul>    
            <li><a href="#">Link 1</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 1.1</a></li>
                    <li><a href="#">Link 1.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 2</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 2.1</a></li>
                    <li><a href="#">Link 2.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 3</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 3.1</a></li>
                    <li><a href="#">Link 3.2</a></li>
                </ul>
            </li> 
        </ul>
    </nav>  
</section>

Answer 1

您的#menu实际上没有background:gray，而您的#menu-container宽度为100％。因此，只需将background:gray应用于#menu而不是#menu-container，您就会得到预期的结果：

#menu {
  background:gray;
}

Demo.

用于垂直滚动条的可见性。当您将ul的宽度设置为768px时，其总宽度实际上不仅仅是768px，还会使用默认值添加总宽度填充使它溢出容器，从而你的问题。 box-sizing的默认ul为content-box，这意味着设置width:768px将设置内容的宽度，则总宽度将为宽度加上默认填充。所以你可以有以下解决方案：

/* set overflow:hidden on the parent #menu */
#menu {
   ...
   overflow:hidden;
}
/* set padding of your ul to 0 */
#menu ul {
   ...
   width: 768px;
   padding:0;
}
/* set box-sizing of your ul to border-box */
#menu ul {
   ...
   width: 768px;
   box-sizing:border-box;
}
/* The last solution is don't set the width for your ul */
#menu ul {
   ...
   /*width: 768px; */
}

注意：您不需要为width设置ul，它会自动填充#menu容器。您已为父width:768px设置了#menu。

Answer 2

的 Demo

正如King King所说，同时将margin-top:0;添加到#menu ul以获得所需的结果。

#menu { background:gray; } #menu ul { margin-top:0; } #menu-container { background:gray /* remove this from #menu-container */ }

对于你的其他问题

的 Demo

添加max-width: 768px和width:100%;

Answer 3

<div id="wrapper">
head element
body element
<div>


#wrapper {
width: 768px;
margin: 0 auto;
}

如果你想要它们的大小相同，你应该使用包装器，然后它将在同一行。

我的标题有768px作为我的菜单，但我的菜单显示较小？

3 个答案: