我想从ul中删除所有缩进。我试着把边距、填充、文本缩进设置为0,但没有用。似乎将文本缩进设置为负数是可行的——但这真的是消除缩进的唯一方法吗?


你能提供一个链接吗? 谢谢 我可以看看 很可能你的css选择器不够强大,或者你可以试试

填充:0 !重要;


去除衬垫:

padding-left: 0;

设置列表样式和左填充为空。

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

申{ list-style:郎; padding-left: 0; 的 <德> < li > a < / li > < li > b < / li > < li > c < / li > < /德>

为了保持项目符号,你可以将list-style: none替换为list-style-position: inside或简写list-style: inside:

ul {
  list-style-position: inside;
  padding-left: 0;
}

申{ list-style-position:内心; padding-left: 0; 的 <德> < li > a < / li > < li > b < / li > < li > c < / li > < /德>


添加到你的CSS:

ul { list-style-position: inside; }

这将把li元素放在与其他段落和文本相同的缩进中。

裁判:http://www.w3schools.com/cssref/pr_list-style-position.asp


我首选的解决方案,以删除<ul>缩进是一个简单的CSS一行:

Ul {padding-left: 1.2em;} <p>段落文本的开头行</p> < ul > <li> .</li> . <li>长列表项正确换行。很长的列表项正确地环绕起来。很长的列表项正确地环绕起来。很长的列表项正确地环绕起来。很长的列表项正确地环绕起来。李< / > <li>列表项3</li> . txt < / ul > <p>段落文本的尾行</p>

这个解决方案不仅是轻量级的,而且有很多优点:

它很好地将<ul>的项目符号左对齐到周围的正常段落文本(=删除<ul>的缩进)。 <li>元素中的文本块如果换行成多行,则会保持正确的缩进。


遗留的信息: 对于IE版本8及以下,你必须使用margin-left代替:

    ul { margin-left: 1.2em; }

我也有同样的问题与脚注,我试图划分。我发现这对我很有效,尝试了上面的一些建议:

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

这似乎使它在我的h1和div内的项目符号左边,而不是外面的左边。


显示:作用是;也可以消除压痕,但也可以去除子弹。


现场演示:https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

由于最初的问题要求不明确,我试图在其他答案的指导方针中解决这个问题。特别是:

将列表项目符号与段落外文本对齐 将同一列表项中的多行对齐

我还想要一个解决方案,不依赖于浏览器同意使用多少填充。为了完整起见,我添加了一个有序列表。


这样做内联,我设置margin为0 (ul style="margin:0px")。项目符号与段落对齐,没有突出。


下面的方法对我很有效。 在Chrome、Edge和Firefox(需要特殊处理)中。 项目符号被保留,并与周围的段落在同一行。

ul {
  padding-left: 0;
  margin-left: 17px;
}

/* Different value for Firefox */
@-moz-document url-prefix() {
  ul {
    margin-left: 14px;
  }
}