gpt4 book ai didi

html - 如何使 nav 元素的宽度为 100%(这样其他元素就会在它下面,而不是紧跟在它后面)

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

抱歉我的英语不太好。

要了解我的问题,请查看 this fiddlethis fiddle .

看看 <nav></nav>部分。如果菜单中的元素不多,则下一个 block <section></section>将在菜单之后。如果菜单中有很多元素都很好,因为 nav有足够的宽度。

下一步怎么做:

site

并且 nav 必须是 100% 宽度而不取决于元素的数量。

html <body>代码:

<body>
<div class="wrapper">
<header>
<center>
<!-- logo and headers here -->
</center>
</header>
<nav>
<!-- menu here -->
</nav>
<section>
<header><h1>Lorem ipsum</h1></header>
<!-- main content here -->
</section>
<aside>
<section>
<header>
<h1>Lorem ipsum</h1>
<!-- block content here -->
</header>
</section>
</aside>

<footer>
</footer>
</div>
</body>

CSS 代码:

body {
color: #8f8f8f;
background-color: #f8f8f8;
background: url(../images/background.jpg) 50% 50% no-repeat #f8f8f8;
/* border: 5px solid #7e7e7e;*/
margin: 0;
}

.wrapper {
max-width: 960px;
margin: auto;
border: 1px solid #7e7e7e;
}

header {
padding: 20px 0;
margin: auto;
}

aside, section {
margin-top: 10px;
}

section {
float: left;
width: 700px;
padding-bottom: 50px;
border: 5px solid #ccc;
}

aside {
float: right;
width: 240px;
border: 1px solid #ccc;
}

aside section
{
width: 230px;
margin-top: 0px;
}

footer {
clear: both;
}

h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
}

section header {
background-color: #CCCCCC;
padding: 5px 0;
margin: 0px;
}

section header h1 {
padding-left: 20px;
}

section p {
padding: 10px 20px;
margin: 0px;
}

/* css for nav */

最佳答案

导航出现在左侧,因为您还没有清除 float 列表。如果您添加以下样式,那么它应该可以工作:

nav:after {clear:both; display:block; content:'';}

Example

关于html - 如何使 nav 元素的宽度为 100%(这样其他元素就会在它下面,而不是紧跟在它后面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22837280/

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