当使用aria标签breadcrumb时，如何在新行上放置p标签

Question

我有一个nav元素，正在尝试在breadcrumb导航栏下面而不是旁边显示文本。我曾尝试在CSS中向我的导航栏属性添加display: inline-block行，但仍然得到了相同的结果。

当我在导航栏后面有2到3个<br>标签时，它就可以工作了，但我不想在每个页面上都这样做。我想使用CSS。

以下是片段：

.first {
display: inline-block;
}
nav.breadcrumb {
padding-top: 0.8em;
padding-bottom: 0.8em;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 4px;
background: hsl(300, 14%, 97%);
font-size: 14px;
float: left;
max-width: 45%;
}
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
left: 0px;
}
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li+li::before {
display: inline-block;
margin: 0 0.25em;
transform: rotate(15deg);
border-right: 0.1em solid currentColor;
height: 0.8em;
content: '';
}
nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
text-decoration: none;
max-width: 45%;
}

<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/reamers">Reamers</a></li>
<li>Jarno Reamers</li>
</ol>
</nav>
<p class="first">Contact Us for <a href="https://gammons.com/reamers">reamers</a> or to ask about other offerings not listed below.</p>

这是小提琴演奏的结果。

Answer 1

在nav.breadcrumb上添加样式display: inline-block;并删除float: left

从.first中删除display: inline-block;

nav.breadcrumb {
padding-top: 0.8em;
padding-bottom: 0.8em;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 4px;
background: hsl(300, 14%, 97%);
font-size: 14px;
max-width: 45%;
display: inline-block;
}
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
left: 0px;
}
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li+li::before {
display: inline-block;
margin: 0 0.25em;
transform: rotate(15deg);
border-right: 0.1em solid currentColor;
height: 0.8em;
content: '';
}
nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
text-decoration: none;
max-width: 45%;
}

<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/reamers">Reamers</a></li>
<li>Jarno Reamers</li>
</ol>
</nav>
<p class="first">Contact Us for <a href="https://gammons.com/reamers">reamers</a> or to ask about other offerings not listed below.</p>

Answer 2

删除.nav.breadcrumb中的float: left

Answer 3

这能达到你想要的吗？https://jsfiddle.net/w8ka032v/2/

.first {
display: inline-block;
width: 100%;
}