时间戳

首页 > 解决方案 > 我有一行 X px 宽的文本。背景颜色也是 X px 宽。如何扩展背景颜色使其比文本更长？

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

问题描述

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

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

#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

我想重新创建顶栏

标签： htmlcss

解决方案

如果您想重新创建该导航栏，您应该使用绝对位置，这样您就不会获得额外的边距，尽管您可以在不使用它的情况下修复它。代码： 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 小提琴链接：https ://codepen.io/djmayank/pen/PooZrKo

推荐阅读