CODEWITHSUNDEEP
htmlcss
noblerare
noblerare

Reputation: 11943

How do I get the numbers of an ordered list to align underneath a div heading?

Jsfiddle here: Jsfiddle

Regarding the yellow div box that I drew, I want my ordered list numbers to left-align directly underneath the box. It does not appear on the JSFiddle, but on my home machine, due to a different resolution monitor, the numbers appear outside of the yellow div box, like this:

example

I want my numbers to be aligned underneath the yellow div box. How can I do this?

I tried playing with margins but that just seems so arbitrary and may not work cross-browser/cross-system

margin-left: 20px;
margin-right: auto;

Upvotes: 0

Views: 642

Answers (1)

showdev
showdev

Reputation: 29188

I had success aligning the list numbers to your yellow box by using the following CSS definitions on the ordered list:

ol {
    padding:0;
    list-style-position:inside;
}

Here's a working demo:

.slide {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
  width: 90%;
  border: 1px solid black;
  background-color: #FFFF99;
  margin-bottom: 20px;
}

ol {
  padding: 0;
  list-style-position: inside;
}

.thetext {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
  width: 90%;
  margin-bottom: 20px;
}
<div class="slide">
  <h3>Category 1</h3>
</div>
<div>
  <ol>
    <li class="thetext">Item 1</li>
    <li class="thetext">Item 2</li>
    <li class="thetext">Item 3</li>
  </ol>
</div>

View on jsFiddle

For reference:

The list-style-position CSS property specifies the position of the marker box in the principal block box.

OUTSIDE: The marker box is outside the principal block box.

INSIDE: The marker box is the first inline box in the principal block box, after which the element's content flows.

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

Upvotes: 2

Related Questions