我想制作一个带有背景颜色的条形图，在栏中是左对齐的文本和右对齐的列表

Question

我想用html创建一个栏。栏中的文本左对齐，列表右对齐在同一行中。

我尝试文本左对齐并浮动右侧列表

我希望有这样的酒吧

https://www.lidl-reisen.de/asfhdsfh (顶部是文字"Lidl-Reisen.de - ...艾因法赫·乌劳比格！ Verantwortung Unternehmen Karriere Service & Hilfe">

<header>
<div id="wrapper">
<div class="topbar">
<p style="text-align: left">
Lidl-Reisen.de - ... einfach urlaubiger!</p>
<ul style="float: right">
<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>

Answer 1

我会在.topbar上使用display: flex，具有以下附加设置：

.topbar {
display: flex;
justify-content: space-between; /* to align the two children elements far left and right */
}
.topbar ul {
margin: 0; /* to avoid the default margin causing a vertical offset */
}
.topbar ul li {
display: inline-block; /* to display the li items next to each other */
}

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

Answer 2

您可以使用带有justify-content: space-between的弹性框：

.topbar {
display: flex;
justify-content: space-between;
}

<div class="topbar">
<p>
Lidl-Reisen.de - ... einfach urlaubiger!</p>
<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>