Удаление разрыва строки после использования списка в абзаце

Question

Я работаю на веб-сайте, где мне нужно разместить информацию, поэтому я использую список внутри абзаца, но после имени списка текст перемещается на другую строку. Я хочу начать абзац после списка. Я прикрепил вывод и свою цель. Вывод Вывод Цель Цель

    <div class="history">
        <h1 class="h-history">History</h1>
        <p class="p">It was established in 1879....</p>
        <h1 class="h-history">Areas and attractions</h1>
        <p class="p"><li>Elephant House</li>is the first....</p>

    </div>

Answer 1

Вы можете получить :before content: '\2022'; свойство, как показано ниже.

.bullet {
  position: relative;
  padding-left: 10px;
}
.bullet:before {
  content: '\2022';
  color: blue;
  position: absolute;
  left: 0;
}

<div class="history">
  <h1 class="h-history">History</h1>
  <p class="p">It was established in 1879.</p>
  <h1 class="h-history">Areas and attractions</h1>
  <p class="p bullet"><strong>Elephant House</strong>is the most famous exhibit in the zoo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Answer 2

<li> - это не список. Это элемент списка. По умолчанию элемент списка отображается как элемент блока, поэтому под этим блоком будет показан следующий текст.

Однако вы можете достичь своей цели следующим образом:

<div class="history">
    <h1>History</h1>
    <p>It was established in 1879....</p>
    <h1>Areas and attractions</h1>
    <ul>
        <li><b>Elephant house</b> is the most famous exhibit in the zoo.</li>
        <li><b>Ape house</b> be carefull! Some inhabitants might throw smelly stuff at you</li>
    </ul>

</div>

Здесь <ul> (для неупорядоченного списка) используется для разметки списка. В списке есть 2 элемента списка. Часть текстового содержимого элементов списка выделена жирным шрифтом (<b>).