所以我是编码新手,我正在尝试创建一个网站,其中包含一些全宽 (100%) 容器,其中包含固定宽度的容器...我尝试过使用数字和 div 等方式,但都没有正在工作。
这是我目前的代码:
HTML:
<div id="wrapper">
<header>
<div class="header">
.logo
.searchbar
.phone numbers insert
</div> <!--closes header div-->
</header>
<div class="navband">
<nav>
<ul class="nav">
<li><a href="#">Engineered Integrated Solutions</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Employment</a></li>
</ul>
</nav>
</div> <!--closes navband div-->
<div class="content">
<h2>Header</h2>
<p>Content Here</p>
</div> <!--closes content div-->
CSS:
#wrapper {
width: 950px;
margin: 0 auto;
}
header {
width: 100%;
height: 175px;
background-color: #ff8400;
}
#nav {
margin-top: 280px;
width: 100%;
}
.nav {
list-style: none;
margin: 0;
text-align: left;
background-color: #08172d;
padding: 5px 0;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
color: #fff;
font-family: arial;
font-weight: bold;
text-decoration: none;
}
.nav a:hover{
display:inline-block;
padding:10px;
color: #ff8400;
font-family: arial;
font-weight: bold;
}
上面的代码显示固定宽度的布局(而它后面的整个主体保持白色),但我不知道如何在不忽略的情况下为标题、导航栏和内容区域包含单独的全 Angular 父 div包装器(固定宽度)完全,这就是我使用图形方法时发生的事情......有什么想法吗?
最佳答案
你应该使用max-width
属性
The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. Note: The value of the
max-width
property overrides width.
成为
.parent{
width: 100%;
}
.child{
padding: 25px 0;
margin: 0 auto;
max-width: 540px;
}
关于html - 尝试将固定宽度的容器放入全宽 (100%) 父容器中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43960278/