gpt4 book ai didi

html - 使用 aria-label breadcrumb 时如何将 p 标签放在新行上?

转载 作者:行者123 更新时间:2023-12-04 02:30:23 25 4
gpt4 key购买 nike

我有一个 nav 元素,我试图在面包屑导航栏下方而不是旁边显示文本。我试过添加 display: inline-block行到我在 CSS 中的导航栏属性,但我仍然得到相同的结果。

当我有 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>

Here is the fiddle result.

最佳答案

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>

关于html - 使用 aria-label breadcrumb 时如何将 p 标签放在新行上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64580900/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com