100%宽度背景仅填充到右侧

UPDATE：它不起作用的原因是宽度为100%的元素位于div class="container"元素内。删除它解决了问题！(我自己还没有足够的代表来回答这个问题，只是想让观众知道问题已经解决了。(

我正在自学蓝图css框架，但我在以下html/css方面遇到了问题。在类bigBox看来，我无法填充页面宽度的100%(它在右侧填充了100%，但与左侧的其他内容对齐。(

我如何才能让它按预期的方式工作？谢谢

<head>
    <title>Hello</title>
    <!-- screen is default blueprint framework file -->
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection" />  
    <!-- import custom styles -->
    <style>
        #topmenu {float:right; margin-top: 50px; /*margin-right: -30px;*/}
        #topmenu ul {list-style: none outside none; }
        #topmenu ul li { display: inline;  }
        #topmenu ul li a { text-decoration: none;  
                           padding: 5px;}
        #topmenu .last { padding-right: 0px; }
        #topmenu .current { font-weight: bold; }
        .bigBox { width: 100%; position: absolute;
                 background-color: blue; height: 430px;
                }
    </style>
</head>
<body>
    <div class="container">
        <!-- logo -->
        <div class="span-12">
            <h1>Hello World</h1>
        </div>
        <!-- top menu -->
        <div class="span-12 last">
            <nav id="topmenu">
                <ul>
                    <li class="current"><a href="">Option 1</a></li>
                    <li><a href="">Option 2</a></li>
                    <li><a href="">Option 3</a></li>
                    <li class="last"><a href="">Option 4</a></li>
                </ul>
            </nav>
        </div>      
        <br class="clear"/>
        <div class="bigBox">
            <div class="span-14">
                <h2>Content Left</h2>
            </div>
            <div class="span-10 last">
                <h2>Content Right</h2>
            </div>
        </div>

    </div>
</body>

"它不工作的原因是宽度为100%的元素在div class="container"元素内。删除它解决了问题！">

回答并为您制作CW。

相关内容

最新更新

热门标签：