我在创建网页菜单时遇到问题 - 我必须在下面的图片中执行此操作。这个黑色部分只是中间内容的背景。我想让这个左侧黑色部分延伸到屏幕左侧,右侧黑色部分延伸到屏幕右侧,但我不能使用宽度:100%在外部div上因为我想留下一个空的空间每个红场。
...在更广泛的屏幕上,这必须是这样的:
答案 0 :(得分:0)
确实如此。
<强> HTML 强>
<header>
<div class="inner"></div>
</header>
<强> CSS 强>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
overflow:hidden; /* prevent scrollbar */
}
header {
position: relative;
}
.inner {
height:100px;
width:980px;
margin:0 auto;
border:1px solid black;
}
header:before, header:after {
content: "";
position: absolute;
background-color: lightblue;
top: 0;
bottom:0;
width:50%;
}
header:before {
left:0;
margin-left:-490px;
}
header:after {
right:0;
margin-right:-490px;
}
答案 1 :(得分:0)
<强>被修改强>
我已根据您的评论更新了代码,出现了轻微错误,我已将其删除。看看这个新链接
据我了解你的问题,你想要创建菜单栏,它将对齐居中,看起来像你http://i.imgur.com/s6keh9f.jpg
我为你创建了一个JSFiddle
http://jsfiddle.net/24eDx/
<强> HTML:强>
<div class="header">
<div class="header-wraper">
<div>
<ul class="menu">
<li><div class="menu-li">Menu 1</div> </li>
<li><div class="menu-li">Menu 2</div> </li>
<li><div class="menu-li">Menu 3</div> </li>
<li><div class="menu-li">Menu 4</div> </li>
</ul>
</div>
</div>
</div>
<强> CSS:强>
.header{
background : black;
height:50px;
width:100%;
}
.header-wraper
{
width : 80%;
margin:0 auto;
}
.header .header-wraper .menu li
{
list-style: none;
background: red;
float: left;
padding: 16px 14px;
border: 2px solid #FFF;
border-width: 0 1px;
}
.header .header-wraper .menu li:first-child
{
border-width: 0 1px 0 2px;
}
.header .header-wraper .menu li:last-child
{
border-width: 0 2px 0 1px;
}
PS :请下次添加您正在处理的代码,这对每个人都有帮助,并阅读有助于您了解如何提出有关堆栈溢出问题的文档。< / p>