Question

我正在努力实现同样的目标 IN THIS EXAMPLE ...我希望我的导航就像在该网站上一样。

HTML

<div id="container">
    <div id="nav"></div>
</div>

CSS

#container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#nav {
    width: 100%
    background: #585858;
    height: 37px;
}

我正在尝试为导航

获得与repeat-x;相同的效果

Answer 1

#container
{
  width:980px;
}
#nav{
  position:absolute;
  left:0;
  right:0;
  /*...no need of width:100%;..*/
}

<强> EXAMPLE

Answer 2

也许你想要实现这样的目标： http://jsbin.com/oWeKiqa/2/

在CSS上试试这个：

#container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#nav {
    width: 100%;
    background: #585858;
    height: 37px;
    left: 0;
    display: block;
    position: absolute;
}

Answer 3

将overflow:hidden;添加到容器div，并且不要忘记您忘记在;属性的末尾添加width，因此它没有被应用。

http://jsbin.com/efilOSA/1/

允许具有固定宽度的div内的内部div具有100％的宽度

3 个答案: