在标题中为块着色答案

【问题标题】：Color a block in header在标题中为块着色
【发布时间】：2013-09-16 04:56:25
【问题描述】：

我想用一个绿色块（大约为标题长度的 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 （对不起，他们可能是错误的，我知道，我只想要彩色块）：

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;
}

【问题讨论】：

能否请您更具体地说明应为绿色的部分。您是指包含“n-logo”链接的容器部分吗？
它必须是标题的整个左侧，包括标题，但现在它要么只是文本背景（太小），要么是整个标题容器（太大），如果你看到的话你会明白的。

标签： html css frameworks jekyll

【解决方案1】：

我结合了你的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>

【讨论】：