Eliminating a line break that appears after incorporating a list into a paragraph

Currently, I am in the process of developing a website where I need to input information. To display this information, I decided to use a list within a paragraph. However, I noticed that after the list name, the text moves to another line which is not what I want. My goal is to have a smooth transition into a new paragraph after the list. Below are the images showing the output and my desired 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>
htmlcss

Answer №1

<li> should not be mistaken for a list itself, as it actually represents a list item within a list structure. By default, a list item is displayed as a block element, causing any subsequent text to appear below it.

To properly format your content, consider the following:

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

In this example, <ul> (an unordered list) is utilized to structure the list with 2 individual items. The content within the list items is styled using bold formatting (<b>).

Answer №2

To create a bullet point using the :before pseudo-element and the content: '\2022'; property, you can use the following code 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

The drop-down menu selection is non-functional on mobile and iPad devices when using Bootstrap

<div class="panel panel-default"> <select> <option value="B3">B3</option> <option value="B4">B4</option> <option value="B5">B5</option> & ...

javascriptangularjshtmlcsstwitter-bootstrap-2

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

phpjavascriptcssajax

Flask: BadRequestKeyError: 400 Bad Request: The server was unable to comprehend the request sent by the browser (or proxy)

When I try to link to the edit view in my birthday reminder app, I keep getting a key error. The get_Gift function returns an object with the key field present and the HTML form has all the necessary fields, so I'm not sure why this error is occurring ...

htmlpython-3.xformsflaskpymongo

Is it better to use multiple external style sheets?

Hello! I am looking to implement a pop-up login screen by integrating downloaded code. The issue I am facing is that the CSS file that accompanies it clashes with my current one. Is there a way to have a specific style sheet only affect certain div tags, ...

htmlcss

Can we access global variables directly in an Angular 2 HTML template?

After setting the app.settings as shown below public static get DateFormat(): string { return 'MM/DD/YYYY';} I need to utilize it in one of my HTML templates for a component. This is what I want to achieve. <input [(ngModel)]="Holiday" [dat ...

htmlangulartypescript

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

What is the correct way to submit a formarray in an angular application following the specified format?

When submitting a form in Angular, I'm facing an issue where only the data from the first index inside the role menu is being passed. How can I ensure that all index data is passed on submit? { "roleMenu":[{ "menu":{ "menuId": 1 }, ...

htmlangulartypescriptangular8angular11

Is there a way to create a dynamic associative array using jquery?

I am looking to create an array structured like the following:- arr[0][from] = value arr[0][to] = value arr[1][from] = value arr[1][to] = value . . And so forth. I have input array html elements for the from & to fields. <input type="text" name ...

javascriptjqueryhtmlarrays

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

cssreactjsnext.jsstylesreact-select

Concealing a field when the PHP post is devoid of content

On page1.php, there is a form that, upon submission, redirects to page2.php where the selected information is summarized. The code snippet below on page2.php retrieves this information. I am attempting to dynamically hide certain rows if the PHP post is e ...

javascriptphphtmlforms

Tips for preventing Bootstrap 4 from automatically adjusting the height of all columns equally

I am receiving text from a loop that I am formatting into lists inside columns. I am attempting to float all my columns one behind the other without any space, but Bootstrap is applying the same height to all of them. Here is an example of what it currentl ...

htmlbootstrap-4

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

javascriptjqueryhtmlmenu

What is causing my 100% height to be excessively large?

I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...

htmlcss

Searching for a single cell within an HTML table

I've been on the hunt for a code that can search through a table and show just one cell. I tried creating my own, but finally stumbled upon one that seems to work perfectly, except for one hiccup. When the search bar is cleared, it displays the first ...

javascripthtmlsearchhtml-table

Issues with HTML5 file uploads causing delays in iOS Safari mobile browsers

I developed a simple HTML5 file upload script using $.ajax(). I also attempted to use xhr, but encountered the same issue. The script successfully uploads an image to imgur.com and works flawlessly on desktop browsers as well as iOS Safari. However, in iOS ...

ajaxhtmlfile-uploadmobile-safari

Adjusting cell width based on content in CSS to handle overflows automatically

I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow. After trying the solution mentioned here, all cells ended up with the same width. However, I requ ...

htmlcsshtml-tableoverflow

Design a dynamic advertisement page using HTML and Bootstrap to ensure responsiveness

I am currently working on a marketing project where I want to give clients the ability to customize their landing page with image ads in a layout that looks something like this: -------------------------------------------------------------------------- | ...

htmlresponsive-designbootstrap-4

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

javascriptjqueryhtmlcssangularjs

Having trouble with the auto width CSS for the center section of my webpage

I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division. HTML: <div style="width:400px;"> <div ...

htmlcss