- Lorem ipsum dolor sit amet, consectetur adipiscing elit

Question

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

html css html-lists

Answer 1

Answer №1

Include all of my earlier comments.

You should never place a <br /> as a sibling to <li>!
There is no such thing as </br>!
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

Answer 2

Include all of my earlier comments.

You should never place a <br /> as a sibling to <li>!
There is no such thing as </br>!
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

- Lorem ipsum dolor sit amet, consectetur adipiscing elit

Answer №1

Similar questions

What is the best way to embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Create a left-aligned div that spans the entire width of the screen, adjusting its width based on the screen size and positioning it slightly

Set meanmenu to a fixed position

The html.dropdown feature is not maintaining the selected value chosen

Ensure your mobile device is age 13 or over before proceeding

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

Pedaling back and forth along a sequence

Table with a set height containing four cells (without scroll bars) and text allocated to each cell

What is the impact of a floated element on vertical spacing?

Incorporate JavaScript to include a new class and attribute

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

Fixed Navigation - Employing stickUp.js extension

What is the process for including a JavaScript file in an HTML document?

What is the process for altering the color of an HTML output depending on its values?

What are the steps to add SVG effects to an image or div element?

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Achieving a seamless blend of parent background with child background: A step-by

Tips for transferring information from Angular 6 to Node.js

Enhancing the appearance of multiple images with CSS and Bootstrap styling