gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 19:16:11 25 4
gpt4 key购买 nike

更新:它不工作的原因是因为 width: 100% 的元素在 div class="container"元素中。删除它解决了问题! (我自己还没有足够的代表来回答这个问题,只是想让观众知道它已经解决了。)

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

最佳答案

“它不起作用的原因是宽度为 100% 的元素位于 div class="container"元素内。删除它可以解决问题!”

为您解答并制作了CW。

关于html - 100% 宽度背景仅填充到右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6551476/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com