代码之家 › 专栏 › 技术社区 › DoubleVoid

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

css3 css html

DoubleVoid · 技术社区 · 7 年前

我想创建一种目录 li 表示一个项目,点应替换为库存中项目的数量,例如:

10x  Item1
1x   Item2
100x Item3

我试过这个,但它似乎不太正确,特别是缩进(特别是当包装的宽度是有限的):

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>

2 回复 | 直到 7 年前

Mihai T 7 年前

您可以在上使用绝对位置 before 使用左边的填充 li 之前 最大宽度。所以,假设你有麦克斯 x1234

见下文

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

  padding-right: 10px;
    position: relative;
    padding-left: 40px;

  position:relative;
}

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

<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>

ksav 7 年前

如果你需要保持这个无序的列表标记,你可以做一些定位 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

此元素的常见用途是实现词汇表或显示元数据 (键值对列表) .

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>