包括数字的Ol条带化

时间:2016-03-16 15:40:23

标签: html css

我的html中有一个ol列表,我有一行条纹。看起来行条纹从数字后面开始。有没有办法让行条带化从数字开始?

我已经发现了一些正在发生的事情



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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:4)

当然,添加list-style-position: inside规则:

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>

答案 1 :(得分:0)

列表样式将为您提供所需的结果。将它设置在里面。

dt <- data.table(mtcars)[,.(gear, carb, cyl)]
###  Make col of lists
dt[,carbList:=list(list(unique(carb))), by=.(cyl, gear)]
###  Now I want to lag/lead col of lists
dt[,.(carb, carbLag=shift(carb)
    , carbList, carbListLag=shift(carbList, type="lead")), by=cyl] 

    cyl carb carbLag carbList carbListLag
 1:   6    4      NA         4           NA
 2:   6    4       4         4           NA
 3:   6    1       4         1           NA <-- should be 4 here, not NA
 4:   6    1       1         1           NA
 5:   6    4       1         4           NA
 6:   6    4       4         4           NA
 7:   6    6       4         6           NA
 8:   4    1      NA       1,2         2,NA
 9:   4    2       1       1,2         2,NA
10:   4    2       2       1,2         2,NA
11:   4    1       2       1,2         2,NA
12:   4    2       1       1,2         2,NA
13:   4    1       2       1,2         2,NA
14:   4    1       1         1           NA <-- should be (1,2) here, not NA
15:   4    1       1       1,2         2,NA
16:   4    2       1         2           NA
17:   4    2       2         2           NA
18:   4    2       2       1,2         2,NA
19:   8    2      NA     2,4,3      4, 3,NA
20:   8    4       2     2,4,3      4, 3,NA
21:   8    3       4     2,4,3      4, 3,NA
22:   8    3       3     2,4,3      4, 3,NA
23:   8    3       3     2,4,3      4, 3,NA
h4:nth-child(even) {
  background-color: red;
}

li {
  list-style: inside number;
}