Блог

Главная - Вопросы по программированию - Как вы размещаете тег p на новой строке при использовании aria-label breadcrumb?

Как вы размещаете тег p на новой строке при использовании aria-label breadcrumb?

#html #css #navbar

#HTML #css #панель навигации

Вопрос:

У меня есть элемент навигации, и я пытаюсь отобразить текст под этой навигационной панелью breadcrumb, а не рядом с ней. Я пытался добавить display: inline-block строку в мое свойство navbar в 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>

Вот результат скрипки.

Комментарии:

1. Удалите float: left nav , если хотите, чтобы он занимал всю строку.

Ответ №1:

При 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>

Ответ №2:

Удалить float: left в .nav.breadcrumb

Ответ №3:

Достигает ли это того, чего вы хотите? https://jsfiddle.net/w8ka032v/2 /

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