Striping includes each number

My HTML contains an ordered list with row striping, but it seems like the row striping is starting from behind the number. Is there a way to make the row striping start at the number itself?

I've attached a snippet showing what's happening.

h4:nth-child(even) {
    background-color: red;
}
<div class='panel-body'>
  <ol>
    <h4 class="people" style="font-family: sans-serif; display: block;">
    <li>
      <span class="name">One, O</span>
      <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
      <span class="time"  style="width: 97px; max-width: 97px;">In Service</span>
    </li>
  </h4>

  <h4 class="people" style="font-family: sans-serif; display: block;">
  <li>
    <span class="name">Two, T</span>
    <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
    <span class="time"  style="width: 97px; max-width: 97px;">Next</span>
  </li>
  </h4>
  <h4 class="people" style="font-family: sans-serif; display: block;">
    <li>
      <span class="name">thr, t</span>
      <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
      <span class="time"  style="width: 97px; max-width: 97px;">1 hr 20 min</span>
    </li>
  </h4>
</ol>
</div>

htmlcss

Answer №1

Yes, you can implement the list-style-position: inside property in your CSS:

h4:nth-child(even) {
    background-color: red;
}
li {
    list-style-position: inside;  
}
<div class='panel-body'>
  <ol>
    <h4 class="people" style="font-family: sans-serif; display: block;">
    <li>
      <span class="name">One, O</span>
      <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
      <span class="time"  style="width: 97px; max-width: 97px;">In Service</span>
    </li>
  </h4>

  <h4 class="people" style="font-family: sans-serif; display: block;">
  <li>
    <span class="name">Two, T</span>
    <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
    <span class="time"  style="width: 97px; max-width: 97px;">Next</span>
  </li>
  </h4>
  <h4 class="people" style="font-family: sans-serif; display: block;">
    <li>
      <span class="name">thr, t</span>
      <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
      <span class="time"  style="width: 97px; max-width: 97px;">1 hr 20 min</span>
    </li>
  </h4>
</ol>
</div>

Answer №2

Utilizing list styling with the inside property will provide you with the desired outcome.

h4:nth-child(even) {
  background-color: red;
}

li {
  list-style: inside number;
}
<div class='panel-body'>
  <ol>
    <h4 class="people" style="font-family: sans-serif; display: block;">
    <li>
      <span class="name">One, O</span>
      <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
      <span class="time"  style="width: 97px; max-width: 97px;">In Service</span>
    </li>
  </h4>

    <h4 class="people" style="font-family: sans-serif; display: block;">
  <li>
    <span class="name">Two, T</span>
    <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
    <span class="time"  style="width: 97px; max-width: 97px;">Next</span>
  </li>
  </h4>
    <h4 class="people" style="font-family: sans-serif; display: block;">
    <li>
      <span class="name">thr, t</span>
      <span class="status" style="color: rgb(79, 133, 27);">Arrived</span>
      <span class="time"  style="width: 97px; max-width: 97px;">1 hr 20 min</span>
    </li>
  </h4>
  </ol>
</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

Dynamic web designs can be achieved by utilizing a combination of technologies such as Ajax

Encountering issues while attempting to use Ajax and Fancybox.js photo viewer simultaneously. The website is initially set up as web 1.0 with standard navigation using hyperlinks. For html5 browsers, a JavaScript is utilized to create a web 2.0 experienc ...

ajaxhtmlfancybox

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

javascriptjquerycsstwitter-bootstraplightbox

Strategies for Returning Multiple Values from a Function in JavaScript

Thanks in advance I am wondering how to extract multiple values from a code block using JavaScript. I am unsure if I need to use an array or something else as I am new to JS. Please consider the following HTML code: <div class="row"> ...

javascripthtmlarrays

Changing the value of a user object's variable in Django

I have been working on implementing a feature that allows users to edit their personal information in a Django project using Django forms. However, after entering new values in the form and hitting enter, the user is redirected back to the main profile pag ...

pythonhtmldjango

Delay the execution of a JavaScript function by a few seconds

<script type="text/javascript"> var timeout; function doAjaxFunc(){ alert("called"); $.ajax({ type: "POST", url: "searchSuggest.php", data: dataString, cache: fal ...

javascriptjqueryhtmlajax

Various <a> elements adjust the HTML code based on the selected option

I am working with the following code snippet: <!-- LANGUAGE --> <div class="languages_box"> <span class="red">Languages:</span> <a href="#" class="selected"><img src="../images/au.gif" alt="" title="" border="0" he ...

javascriptphpjqueryhtmlajax

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

The HTML password input continues to respond to key bindings, even when other inputs are not affected by the bindings

In the ongoing development of a legacy react application, I encountered keybindings that are causing unexpected behavior. For instance, pressing the "F" key triggers the full screen mode within the app. However, this keybinding is inadvertently active for ...

htmlreactjsinputkey-bindings

Perform a CSS transition following a jQuery fadeOut effect

Check out the red and green boxes on this JSFiddle. Clicking the 'click me' button makes the red boxes fade out using jQuery's fadeOut method, while the green boxes jump to their new position. I'm looking for a way to make the green bo ...

jquerycss

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

Is there a way to automatically edit specific lines on websites right after they load? Specifically, I want to change <div class="1"> to <div class="1" style="display:none">, and <div class="2" style ...

htmlcssgoogle-chrometampermonkey

If the SASS condition matches the variable for the background color, then

I attempted to create a conditional statement in my component using Sass @if and @else. The condition I set was that if background == var(--bg-danger), the color should be white. However, it only returned white and did not trigger the else condition. @mixi ...

cssvue.jssass

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

htmlcss

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

javascripthtmlradio-button

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

I am looking to arrange the names in alphabetical order when a list item is clicked. My tools of choice are Vue.js and Flex Grid. The list item I am working with is called ListAll, When clicking on ListAll, I want to display all the records grouped by na ...

javascriptcssvue.jsvuejs2flexboxgrid

Switching between different apps on a Django website

There are currently 2 applications on my website: users base The main url configuration always generates URLs with the appname of base/index.html. When a URL action like href="login" is provided from base/index.html, it automatically looks for "base/log ...

htmldjangopython-3.x

Spacing applied to content within a fresh Vue application

Having been assigned the task of developing a Vue page for my team, I am facing an issue with a persistent white border surrounding the entire page. <script setup lang="ts"> </script> <template> <body> <div>&l ...

htmlcssvue.js

Text below div will be displayed

When hovering over a div, an identical one will appear next to it with more information. Unfortunately, the content appears under the div but retains the styling like border-radius and background color. This is how my HTML looks: The div that needs ...

jqueryhtmlcss

Hover and focus effects of the main navigation menu in Semantic UI CSS

I seem to be having trouble styling my navbar with semantic-ui. I want to make changes to the color and background-color on hover and when focused. However, no matter what I try, the hover effect just won't work. I was only able to achieve it using jQ ...

javascriptjqueryhtmlcsssemantic-ui

Arrange array with objects in order of most recent date

I am in the process of developing a chat application where all contacts are stored as objects in one array: var contacts = [{name: "Ruud", age: 20},{name: "Elke", age: 17}]; Next, I have the chat messages for each contact saved in an array of objects: v ...

javascripthtmlarraysobject