我想用一个绿色 block (大约是标题长度的 1/4)分割我的标题栏，其余部分是浅色的。现在我有一个标题，背景颜色设置只为实际内容着色，我如何为包含标题的栏的整个左侧着色？
HTML:
<!doctype HTML>
<html>
<header class="nav">
<div class="container">
<a class="n-logo" href="/">That Awkward Moment.</a>
<ul class="n-menu">
<li><a href="#flav">The Project</a></li>
<li><a href="#feat">About Us</a></li>
<li><a href="#inst">Contact</a></li>
<li><a href="#vid">Github</a></li>
</ul>
</div>
</header>
<main>
</html>
和它的 CSS(对不起，我知道它们可能是错误的，我只想要彩色 block ):
body {
background-color: $yellowLighter;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
header {
display: block;
}
h1 {
color: $orangeDarker;
}
.container {
margin-right: auto;
margin-left: auto;
}
.nav {
padding: 1em 0;
border-bottom: 1px solid #eee;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
background: #fffcf5;
position: fixed;
width: 100%;
height: 50px;
top: 0;
z-index: 1;
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}
.n-menu {
float: right;
list-style: none;
font-weight: bold;
}
.n-menu li {
display: inline-block;
margin-left: 1.2em;
}
.n-menu a {
color: #555;
}
.n-logo {
float: left;
color: #333;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 18px;
}
ul {
padding: 0;
margin: 0 0 10px 25px;
vertical-align: middle;
}
li {
text-align: -webkit-match-parent;
}
最佳答案
我结合了你的 html 和 css，尝试以下操作:
<html>
<header class="nav">
<style>
body {
background-color: $yellowLighter;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
margin: auto auto;
}
header {
display:block;
}
h1 {
color: $orangeDarker;
}
.container {
margin-right: auto;
margin-left: auto;
}
.nav {
padding: 0 0;
border-bottom: 1px solid #eee;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
background: #fffcf5;
position: fixed;
width: 100%;
height: 50px;
top: 0;
z-index: 1;
margin-left: 0;
margin-bottom: 20px;
list-style: none;
}
.n-menu {
float: right;
list-style: none;
font-weight: bold;
}
.n-menu li {
display: inline-block;
margin-left: 1.2em;
}
.n-menu a {
color: #555;
}
.n-logo {
position: absolute;
color: #333;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 18px;
}
.n-logo-div{
background-color:green;
width: 25%;
float: left;
position: relative;
height: 100%;
}
ul {
padding: 0;
margin: 0 0 10px 25px;
vertical-align: middle;
}
li {
text-align: -webkit-match-parent;
}
</style>
<div class="container">
<div class="n-logo-div">
<a class="n-logo" href="/">That Awkward Moment.</a>
</div>
<ul class="n-menu">
<li><a href="#flav">The Project</a></li>
<li><a href="#feat">About Us</a></li>
<li><a href="#inst">Contact</a></li>
<li><a href="#vid">Github</a></li>
</ul>
<div style="clear: both"></div>
</div>
</header>
</html>
关于html - 为标题中的 block 着色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18753525/