我为我们公司制作的现有网站设计了一个新网站。它在 header 容器内的容器内有导航按钮。
在新设计中,此导航栏具有全屏宽度。
是否可以在不更改 html 代码的情况下执行此操作? (因为他们告诉我不要碰 html。)
我希望我的问题足够清楚。
/编辑。我只需要处理 CSS 代码。
.header_div_button_container {
float: left;
margin-left: -131px;
margin-right: 0;
margin-top: 130px;
}
.homepage .header_div_button_container {
margin-left: -137px;
}
.header_div_button {
background-color: #034ea2;
color: #FFFFFF;
float: left;
font-size: 11px;
font-weight: bold;
height: 16px;
padding-top: 10px;
text-align: center;
width: 110px;
}
这是我得到的 css 的一小部分。 html 主要是由我们使用的 cms 创建的,对于 stackoverflow 来说它不是真正可读的。
我希望你能用这个做点什么。
最佳答案
假设这样的结构
HTML
<header>
<div class="inner"></div>
</header>
您的 CSS 可以如下所示:
.inner {
height:100px;
max-width:1100px;
margin:0 auto;
background-color: blue;
position: relative;
}
.inner:before, .inner:after {
content: "";
position: absolute;
background-color: lightblue;
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
z-index:-2;
}
.inner:before {
right: 100%;
}
inner:after {
left: 100%;
}
关于html - 是否可以在标题容器全屏宽度内制作一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21833054/