Removing a line break after using list in paragraph

Question

I am working on website where i have to put information so I am using a list inside a paragraph but after the list name the text moves to another line. I want to start a paragraph after the list.I have attached the output and my target.The output Output The target Target

    <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>

Firstly, `li` elements should not be outside of an `ul` element, and `ul` element should not me wrapped on a `p` element. https://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside — robinvrd, Feb 19 '20 at 10:11
Do you have for each item of the list, a text like this to follow the list item ? How many items has your list ? Please give more code. — robinvrd, Feb 19 '20 at 10:13
@robinvrd so tell me if i dont do it and i only define a list and after that a paragraph it goes on next line,how can i start a paragraph after the list — Mike Popins, Feb 19 '20 at 10:25
you simply need to wrap your paragraph inside your list item `li`. — robinvrd, Feb 19 '20 at 10:25
can you tell how to change bullet colors,when i did it did change color but the list name went to next line — Mike Popins, Feb 19 '20 at 10:44
@MikePopins you can change `bullet color` to define color on `li` and also inside `li` element define `color` which you want. — Raeesh Alam, Feb 19 '20 at 11:22

lupz · Answer 1 · 2020-02-19T11:22:01.693

<li> is not a list. It is a list item. By default, the list item is rendered as a block element and hence the following text will be shown below that block.

However, you can achieve your target like this:

<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>

Here, <ul> (which is for unordered list) is used to markup a list. The list has 2 list items. A portion of the text content of the list items is emphasized as bold text (<b>).

Raeesh Alam · Answer 2 · 2020-02-19T12:17:17.907

You can achieve by :before content: '\2022'; property like below snippet.

.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>

Removing a line break after using list in paragraph

2 Answers2