html - 使用 aria-label 面包屑时如何将 p 标签放在新行上?
问题描述
我有一个导航元素,并试图在该面包屑导航栏下方而不是在它旁边显示文本。我试图display: inline-block
在 CSS 中向我的导航栏属性添加一行,但我仍然得到相同的结果。
当我<br>
在导航栏后面有 2 或 3 个标签时,它可以工作,但我不想在每个页面上都这样做。我想使用 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>
解决方案
关于nav.breadcrumb
添加样式display: inline-block;
和删除float: left
display: inline-block;
从中删除.first
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>
推荐阅读
- javascript - ajax xhr.responseText 当结果包含@error uncaught typeerror
- python - 有没有办法在同一条线上绘制 3 个(或更多)图表
- c# - 从 Page.ClientQueryString() 返回的一个奇怪的编码字符
- node-postgres - 错误:“S”节点 posgres 处或附近的语法错误
- vue.js - 使用 vuetify 数据表的动态表头和值
- javascript - TypeError:无法读取未定义 Reactjs 的属性“地图”?
- gremlin - 搜索在 Janusgraph 中的属性分配的原始数据数组的成员
- php - 调整多个图像字段的大小
- git - 如何在提交前检查打字稿类型?
- c# - ListView SubItem OwnerDraw 粗体部分文本