html - 我有一行 X 像素宽的文本。背景颜色也是 X px 宽。如何扩展背景颜色使其比文本更长？

Question

我想添加一行文字，背景颜色应该是网站的完整颜色。

我想在网站中将文本居中。我给了文本一个特定的宽度，使其居中。虽然背景颜色和文本一样宽，但我想扩展它

#wrapper {
    text-align: center;
    background-color: #e6eef2;
    padding: 7px;
    width: 1222px;
    margin: 0 auto;
}

.topbar {
    display: flex;
    justify-content: space-between;
    color: #06507f;
}

<header>
    <div id="wrapper">
        <div class="topbar">
            <span>Lidl-Reisen.de - ... einfach urlaubiger!</span>
            <ul>
                <li><a href="http://www.lidl.de/de/verantwortung">Verantwortung</a></li>
                <li><a href="http://www.lidl.de/de/geschichte">Unternehmen</a></li>
                <li><a href="http://www.lidl.de/de/karriere">Karriere</a></li>
                <li><a href="https://www.lidl-reisen.de/faq">Service & Hilfe</a></li>
            </ul>
        </div>
    </div>
</header>

这是我指的网站:https://www.lidl-reisen.de/asd

我想重新创建顶栏

Answer 1

如果你想重新创建那个导航栏，你应该使用绝对位置，这样你就不会得到额外的边距，尽管你可以在不使用它的情况下修复它。代码:HTML:

<header>
    <div id="wrapper">
        <div class="topbar">
            <span>Lidl-Reisen.de - ... einfach urlaubiger!</span>
            <ul>
                <li><a href="http://www.lidl.de/de/verantwortung">Verantwortung</a></li>
                <li><a href="http://www.lidl.de/de/geschichte">Unternehmen</a></li>
                <li><a href="http://www.lidl.de/de/karriere">Karriere</a></li>
                <li><a href="https://www.lidl-reisen.de/faq">Service & Hilfe</a></li>
            </ul>
        </div>
    </div>
</header>

CSS:

#wrapper {
    text-align: center;
    background-color: #e6eef2;
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    padding:10px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    color: #06507f;
}

查看我的 js fiddle 链接:https://codepen.io/djmayank/pen/PooZrKo