如何扩展div的正确宽度?

时间:2013-03-10 18:41:11

标签: html css

我想将div的正确宽度扩展到100%(看截图,我的div是红色),我试过:

HTML示例:

<header>
    <nav>
        <ul>
            <li>Menu</li>
            <li>Menu</li>
            <li>Menu</li>
        </ul>
    </nav>
    <aside>
        <h1>Logo</h1>
    <aside>
</header>

CSS:

header {
    width: 1024px;
    height: 395px;
    margin: 0 auto;
}

nav {
    height: 60px;
    width: 690px;

    position: absolute;
    top: 20px;
    right: 0;

    background:red;
}

这很好但是当我尝试缩小(ctrl - )时,菜单导航列表从容器中出来。徽标保持居中但不导航。

感谢您的帮助! 抱歉我的英语不好。

click here

2 个答案:

答案 0 :(得分:0)

我认为你正在寻找这个:jsfiddle。将position: relative添加到标题中。之后,您的导航定位将相对于您的标题。为了正确对齐,您可以将导航top: 20px更改为top: 0

答案 1 :(得分:0)

如果您希望红色条始终延伸到窗口的右边缘,即使放大和缩小浏览器窗口,也可以将此条的宽度设置为非常高的值(例如500%)。这将向右延伸很多条,但会添加一个水平滚动条。 因此,设置以下内容只是隐藏溢出:

html,body
{
   overflow-x:hidden;
}