CODEWITHSUNDEEP
htmlcss
zazvorniki
zazvorniki

Reputation: 3602

Ol striping that includes the number

I have an ol list in my html that I have row striping on it. It looks like the row striping is starting at behind the number. Is there a way to have the row striping start at the number?

I've included a snipping of 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>

Upvotes: 2

Views: 33

Answers (2)

Aaron
Aaron

Reputation: 10440

List style will give you the result you need. Set it to inside.

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>

Upvotes: 0

j08691
j08691

Reputation: 207900

Sure, add the list-style-position: inside rule:

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>

Upvotes: 4

Related Questions