如何使用css在列表中设置自动换行左对齐

Question

在我的博客页面qavavalidation.com，我有带有链接的垂直菜单，当我进行自动换行时，它没有与正确的左缩进对齐，请指导我使用正确的CSS以使其正确对齐

这是jsfiddle链接https://jsfiddle.net/r7k9sueu/1/

目前是

--- Download and setup python on
windows machine

但是我想要

--- Download and setup python on
     windows machine

实际图像

Answer 1

您可以尝试使用如下所示的 before 元素并删除 imgs：

.dtNode {
 position: relative;
 padding-left: 20px;
}

.dtNode:before {
 position: absolute;
 content:"";
 left: 0;
 top: 0;
 background-image: url(http://qavalidation.com/wp-content/plugins/wp-dtree-30/dtree-img/page.gif);
 height: 20px;
 width: 20px;
 background-repeat: no-repeat;
 background-size: contain;
}

Answer 2

<div class="dtNode"><a id="smnu25" class="node" href="http://qavalidation.com/2018/01/know-write-selenium-test-using-python.html/" title="Know how to write Selenium test using Python" onclick="javascript: mnu2.s(5);">Know how to write Selenium test using Python</a> </div>

删除已经存在的图像。并将其用作带有

padding-left 25px

的锚标记的背景

.dtNode a{ padding-left:25px; 
 backgorund:url(filename ) 0 0 no-repeat;)
}

这不是您的样式的确切代码，因为您没有向我提供代码，我只是建议一个答案。

Answer 3

<ul>
    <li>item</li>
    <li>another item</li>
    <li>a very very very very very very very very very very very very very very very very very very very very very long item</li>
</ul>

---

ul {
  padding: 0;
}

li {
  list-style-type: none;
  padding-left: 20px;
  position: relative;
}
li:before {
  content: "-";
  position: absolute;
  left: 0;
}

Answer 4

您正在寻找

list-style-position

，例如

ul {
  list-style-position: outside;
  padding-left: 12px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

Answer 5

首先，您应该将 div 标签更改为 li 标签，然后删除其中的空 gif，然后为每个 li 标签添加填充，以获得如下内容：

<ul>
  <li style ="padding-let: 20px;"><li>
  <li style ="padding-let: 20px;"><li>
  <li style ="padding-let: 20px;"><li>
</ul>

这是您的代码的 js 小提琴：

https://jsfiddle.net/omtjm9zL/2/