How To Keep LI Numbers Inside OL

Related searches

When the font size of the LI numbers increases the numbers leave the OL container (in pink).

Is there a way to increase the number size but keep everything inside of the pink area?

Here is an example:

ol {
  background: pink;
}

li {
  font-size: 50px;
}

span {
  font-size: 30px;
}
<ol>
  <li>
    <span>car</span>
  </li>
  <li>
    <span>plane</span>
  </li>
  <li>
    <span>boat</span>
  </li>
</ol>
ol {
  background: pink;
  list-style-position: inside;
}

<ol>: The Ordered List element, ul { list-style: none; margin: 0; padding: 0; } li { text-align: center; }. Bullets and numbers You can use list-style: inside; to align the numbers. you can read more� You can use list-style: inside; to align the numbers. you can read more about this here, and his parent list-style. the initial value is set to outside, but i have the feeling firefox set it to inside by default. Anyway, this property gives you control of position the bullets/numers from your list.

if youre going to just use a fixed font-size of 50px you could simply add a padding to the OL element:

ol {
  padding-left: 70px;
  background: pink;
}

however, if youre going to use something cooler, you could do something like this:

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}

How Do I Align The Numbers of An Ordered List?, Ever wanted to make a list with the bullets a different color than the text, like in this .example ol li::before {content: counter(li); color: red; display: inline-block; the numbers to overflow on the left and thus remain correctly aligned on the right. I usually just set a desired line height to space them to the desired hight. ul li, ol li { line-height:160%; /*or whatever height you like*/ }

Run this code

 ol {
      background: pink;
      list-style-position: inside;
    }
    <ol>
      <li>
        <span>car</span>
      </li>
      <li>
        <span>plane</span>
      </li>
      <li>
        <span>boat</span>
      </li>
    </ol>

CSS: colored bullets and list numbers, <li> indicates a line item in either an unordered or ordered list of items B, C, and so on—but numbers and both lower and upper case letters and If you think you need to keep your bulleted lists simple (we're thinking black,� A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

The Ultimate Guide to Bulleted Lists in HTML Email, HTML lists allow web developers to group a set of related items in lists. Example. <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>. Try it Yourself � list item starts with the <li> tag. The list items will be marked with numbers by default:� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

HTML Lists, Let’s say all you wanna do is style the dang numbers: See the Pen Custom List Style 2 by Chris Coyier ( @chriscoyier ) on CodePen . Oh and hey, if you’re worried about lining up the numbers, you could apply the counter with ::marker and let the magic of list-style do automatic alignment, or here’s an idea with subgrid.

Forcing inline-block Elements on One Line. To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element that has overflow-x: auto set to show horizontal scrollbars.

Comments
  • why not just add a margin-left
  • cause that seems hackish
  • The custom counter is very cool, and adding the padding definitely works but I was wondering if there's a built in property specifically for getting the default OL numbers to play nice. Maybe a display: property or similar that gets it to stay inside? But maybe messing with the spacing is the only way.
  • The guy already answered it why are you reposting his solution lol
  • Sorry i not seen loool :D