- Lorem ipsum dolor sit amet, consectetur adipiscing elit

I am looking to create a list with lower-roman indexes that are enclosed in parentheses (ii), where the content of each item is indented. Here is an example:

(i)     lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer ut metus nec urna efficitur dapibus vitae quis justo.

(ii)    Maecenas ac odio eu eros eleifend congue eget sed neque.
        Fusce laoreet mauris at cursus congue.

Here is my attempt using CSS:

<ol class="roman">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </li>
  <li>
    Maecenas ac odio eu eros eleifend congue.
  </li>
</ol>

However, the indentation is not being applied to the entire paragraph. How can I achieve the desired formatting?

htmlcsshtml-lists

Answer №1

Include all of my earlier comments.

  1. You should never place a <br /> as a sibling to <li>!
  2. There is no such thing as </br>!
  3. Utilize absolute and relative positioning.

ol.roman {
  text-align: justify;
  list-style-position: inside;
  counter-reset: list;
}

ol.roman > li {
  list-style: none;
  position: relative;
}

ol.roman > li:before {
  content: "(" counter(list, lower-roman) ") ";
  counter-increment: list;
  position: absolute;
  left: -35px;
  text-align: right;
  display: block;
  width: 25px;
}
<ol  class="roman">
  <li>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
  <li>world world wworld world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world</li>
  <li>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</li>
</ol>
<p>finished with the list..</p>

Preview

https://i.sstatic.net/3xhnk.png

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

Is there a way to adjust the height pixel value in my code so it can be dynamic?

I have created a simple script that allows selected objects to fade in as the user scrolls down. However, my issue is that this script is quite rigid. If I were to apply it to 20 different objects, for example, I would need to manually adjust the height ea ...

javascriptjqueryhtmlcssweb

What strategies can I implement to prevent position: absolute from obscuring my content?

I am currently experiencing an issue with my Google Map loading within a tab. The container div has the position set to absolute. Although the map displays correctly, I am encountering a problem where it covers any content I try to place underneath it. My ...

javascriptjqueryhtmlcss

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

htmlcssvue.js

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

csscss-selectors

Looking for a replacement for EO.Pdf to convert HTML to PDF in C#? Check out wkhtmltopdf!

Currently, I am in the process of creating an HTML catalog for movies, with plans to convert it into a PDF format. While using EO.Pdf initially showed promise with a small test sample, issues arose when attempting to run it against the entire list of movie ...

c#htmlpdfc#-4.0wkhtmltopdf

If a second instance is hidden, SVG will appear as a mysterious black box

Two separate div elements each contain an identical SVG graphic. If I hide the first div by setting it to "display: none", the SVG in the second div appears as a gray box. This issue is present in both Firefox and Chrome browsers. Any insights into why ...

javascripthtmlcsssvg

Utilize a function within styled-components

I am looking to dynamically adjust the font size of a button based on the length of a passed-in prop. However, I can't use a dynamic width due to a custom animation applied to the component. Here is my current code: const checkLength = () => { i ...

cssreactjsstyled-components

When attempting to overlay CSS text onto an image, the text appears to be hiding behind the

Essentially, what I was attempting to do was overlay some text on top of an image on a website I'm creating. After researching online, I learned that I could achieve this by using position absolute and relative, which worked to some extent. However, n ...

htmlcssreactjs

Tips for directing attention to a specific row with an input field in JavaScript

I duplicated a table and added an input field for users to search or focus on a specific row. However, there are two issues: When a user enters a row number, the table displays the wrong row - for example, if the user enters 15, the table shows row number ...

javascripthtmlcss

Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic. Here is what the icons should look like: However, this is how the icons actually ...

htmlcssfontsicons

Dim the shading of a portion of the picture

If you have an image that covers an entire element through CSS like this #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;} Now, what if you want to add a gray ov ...

css

Menu Design Inspired by Amazon Using jQuery

Can someone please assist me in locating a jQuery Amazon-style menu example? I would like to implement something similar and am hoping to avoid having to write it from scratch. Thank you! ...

jqueryhtmlcss

Tips for retaining user input in an input box using HTML and AngularJS

Is there a way to retain a user's input in an input box? This is the current code snippet: <input type="text" ng-model="userText" placeholder="Enter text here"> However, I am looking for a solution that will allow the entered text to persist ...

javascripthtmlangularjs

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

htmlcolorsjasper-reportsireport

Analyzing all the <option> elements within a <select> tag with jQuery

I have a WordPress plugin in development and I am currently facing an issue with comparing user-input from an <input> element to a set of <option> elements within a <select> element. Here is my current approach: $('button#test_bu ...

javascriptjqueryhtml

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

javascripthtmlangularjssemantic-ui

Choosing colors for Font Awesome icons

Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...

cssfont-awesome

The process of creating a React build varies greatly from the initial development phase

Thank you for offering to help me! After building my React web app, it looks very different from development mode. I use serve -s build to monitor the app build. However, even on my online DigitalOcean server, it doesn't appear the same as in develop ...

javascriptcssreactjsbuildstyled-components

A collection of items that mysteriously affix themselves to the top of the page as

Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...

phpjavascriptjqueryhtmlcss