Question

我试图通过 list-style-position：inside 来获取另一个div 填充数字li中的剩余空间，但我无法做到似乎让它发挥作用。

虽然我可以使用 list-style-position：outside 并添加间距，因为它与页面上的其他元素重叠，但我更倾向于将其放在内部（如果可能的话）。我计划在列表上超过100个项目。

＆＃13;

body { margin: 0; padding: 0; }

ul {
  list-style-position: inside;
  list-style-type: decimal;
  margin: 0;
  padding: 0;
}

li {
  width: 100%;
}

.myClass {
  display: inline-block;
  width: 100%; /* fill remaining space in the li */
  height: 20px;
  background: #000;
}

＆＃13;

<ul>
  <li><div class="myClass"></div></li>
</ul>

＆＃13;

Answer 1

您可以在flex上使用li，在数字的伪元素上使用css counter，然后将.myClass设置为flex-grow: 1

body { margin: 0; padding: 0; }

ul {
  list-style-position: inside;
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: section;       
}

li {
  width: 100%;
  display: flex;
}

li:before {
  counter-increment: section;
  content: counter(section) ". ";
}

.myClass {
  display: inline-block;
  height: 20px;
  background: rgba(0,0,0,0.5);
  flex-grow: 1;
}

<ul>
  <li><div class="myClass"></div></li>
</ul>

使用list-style-position：inside创建div填充剩余宽度

1 个答案: