html - 如何创建具有正确缩进的自定义 HTML li 点

Question

我想创建一种库存，其中每个 li 代表一个元素，点应替换为库存中元素的数量，例如:

10x  Item1
1x   Item2
100x Item3

我试过了，但它似乎不太对，尤其是缩进(尤其是当 wrapper 的宽度有限时):

ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
    
li {
  padding-left: 1em;
  text-indent: -1em;
  padding-right: 10px;
}

li:before{
  content: 'x' attr(data-item-count) ' ';
}

<div style="width:100px;border:1px solid #000">
  <ul>
      <li data-item-count="1">Health potion</li>
      <li data-item-count="10">Fire scroll</li>
      <li data-item-count="104">Skull</li>
  </ul>
<div>

Answer 1

如果您需要保留此无序列表标记，您可以使用 inline-block 进行一些定位。 .

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: inline-block;
  width: 100%;
}

li:before {
  content: 'x' attr(data-item-count) ' ';
  padding-right: 1rem;
  width: 2rem;
  display: inline-block;
  text-align: right;
}

<ul>
  <li data-item-count="1">Health potion</li>
  <li data-item-count="10">Fire scroll</li>
  <li data-item-count="104">Skull</li>
</ul>

---

然而，这似乎是一个很好的候选 <dl> 和 display: grid

Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 0.3em;
  grid-row-gap: 0.5em;
  width: 100px;
  border: 1px solid #000;
  padding: 5px;
}

dt,
dd {
  margin: 0;
}

<dl>
  <dt>x1</dt>
  <dd>Health potion</dd>
  <dt>x10</dt>
  <dd>Fire scroll</dd>
  <dt>x104</dt>
  <dd>Skull</dd>
  <dt>x105</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>