问仅向右填充100%宽度的背景
EN

Stack Overflow用户

提问于 2011-07-02 01:51:37

回答 1查看 177关注 0票数 1

更新:它不工作的原因是因为宽度为: 100%的元素位于一个div容器“class=”元素中。删除它解决了这个问题！(我还没有足够的代表来回答这个问题，只是想让观众知道这个问题已经解决了。)

我正在自学blueprint 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>

css

blueprint-css

html

回答 1

Stack Overflow用户

发布于 2011-08-26 21:30:05

它不起作用的原因是因为宽度为100%的元素位于div容器“class=”元素内。删除该元素解决了此问题！

回答并为您制作了CW。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6551476

复制

相似问题

问仅向右填充100%宽度的背景
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅向右填充100%宽度的背景EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅向右填充100%宽度的背景
EN