Question

我的目标是为无序列表显示短划线而不是子弹。

HTML：

<div>
   <ul>
      <li>Item 1: Lore ipsum lore ipsum lore ipsum...</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</div>

CSS：

div {
  width: 200px;
}

ul {
  list-style: none;
}

ul li:before {
  content: '-';  
  padding-right: 5px;
}

div {
  width: 200px;
}

ul {
  list-style: none;
}

ul li:before {
  content: '-';  
  padding-right: 5px;
}

<div>
<ul>
<li>Item 1: Lore ipsum lore ipsum lore ipsum...</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

的jsfiddle： https://jsfiddle.net/kk10ogd4/

短划线显示为所需。但是：没有与默认项目符号列表样式相同的文本缩进。正如您在小提琴中看到的那样，第一个列表项的文本由两行组成，第二行从短划线开始。如何实现第二行从第一行的第一个字母开始，而不是在第一行的短划线下（文本缩进问题）???

Answer 1

从here获取，您可以添加填充和否定文字缩进：

ul li{
  padding-left: 20px;
  text-indent: -20px;
}

小提琴：https://jsfiddle.net/4csL8a9g/

这是你想要实现的目标吗？

Answer 2

在text-indent选择器上使用否定ul li属性。

ul li{
    text-indent: -11px;
}

示例：https://jsfiddle.net/x0kL0vye/

已经回答here。

Answer 3

您可以使用表格布局，并在li上添加display: table和在伪元素上添加display: table-cell。

＆＃13;

div {
  width: 200px;
}
ul {
  list-style: none;
}
li {
  display: table;
}
ul li:before {
  content: '-';
  display: table-cell;
  padding-right: 5px;
}

＆＃13;

<div>
  <ul>
    <li>Item 1: Lore ipsum lore ipsum lore ipsum...</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

＆＃13;

CSS：带有破折号的列表的文本缩进

3 个答案: