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

【问题标题】：How to set word wrap left alignment in list using css如何使用css在列表中设置自动换行左对齐
【发布时间】：2018-02-08 10:24:22
【问题描述】：

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

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

目前是

--- Download and setup python on windows machine

但我想要

--- Download and setup python on windows machine

实际图像

【问题讨论】：

来个简单的代码示例来告诉我们您的问题怎么样？
我对如何尝试基本的 css 更改不太了解，我仍然尝试使用 .dtree a { white-space: nowrap; } 但没有运气...
请设置一个最小的代码示例，例如在这里：jsfiddle.net。如果不提供一些显示您已经尝试过的代码，您可能不会获得任何帮助。
给你jsfiddle.net/r7k9sueu

标签： html css blogs

【解决方案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;
}

【讨论】：

【解决方案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;)
}

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

【讨论】：

【解决方案3】：

首先，您应该将 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/

【讨论】：

【解决方案4】：

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

【讨论】：