CSS：如何在破折号之前使用 li 正确对齐 li 元素答案

【问题标题】：CSS: How to allign properly li elements using li before dashCSS：如何在破折号之前使用 li 正确对齐 li 元素
【发布时间】：2017-10-18 01:02:12
【问题描述】：

我创建了一个简单的ul，使用破折号来显示li 元素。

Here is the example fiddle:

li 未正确对齐：

目前

–Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus

blandit 应与 Lorem 对齐。

这是我正在使用的 css 代码

ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;
}

li {
  padding-left: 10px;
  padding-bottom: 0.1em;
  text-indent: -.5em;
}

li:before {
  content: "– ";
  color: #333;
}

【问题讨论】：

这不是解决方案，是修补程序：您可以在 :before 元素中使用 margin-left: -.2em;。根据需要更改值以适应

标签： css

【解决方案1】：

您可以在 li 上使用填充和破折号的绝对定位（并删除文本缩进）：

ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;
}

li {
  padding-left: 1.2em;    /* amount of space for the dash */
  padding-bottom: 0.1em;
  position: relative;
}

li:before {
  content: "–";
  color: #333;
  position: absolute;
  left: 0;
  top: 0;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>

【讨论】：

【解决方案2】：

你应该让 li padding-left = text-indent。

例如：

{
   padding-left: .5em; 
   padding-bottom: 0.1em;
   text-indent: -.5em;
}

或根据需要将它们设为 10 像素

ul {
    list-style-type: none;
    padding:0;
    margin-bottom: 15px;
	 
	  
}

  li { 
    padding-left: 10px; 
    padding-bottom: 0.1em;
    text-indent: -10px;
}

  li:before {
    content: "– ";
    color: #333; 
}

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>

【讨论】：

【解决方案3】：

将position: absolute 应用到li::before 即可解决问题

ul {
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 15px;
	 
	  
}

  li { 
    padding-left: 10px;
    
    padding-bottom: 0.1em;
    /*text-indent: -.5em;*/
	 
}

  li:before {
    content: "– ";
    position: absolute;
    left: 10px;
    color: #333; 
 
}

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li>
</ul>

【讨论】：