Html 如何从无序列表项中删除缩进？

How to remove indentation from an unordered list item?

提问by antonpug

I want to remove all indentation from ul. I tried setting margin, padding, text-indentto 0, but no avail. Seems that setting text-indentto a negative number does the trick - but is that really the only way to remove the indentation?

我想从ul. 我尝试将margin, padding,设置text-indent为0，但无济于事。似乎设置text-indent为负数可以解决问题-但这真的是删除缩进的唯一方法吗？

回答by j08691

Set the list style and left padding to nothing.

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

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

To maintain the bullets you can replace the list-style: nonewith list-style-position: insideor the shorthand list-style: inside:

要维护子弹，您可以替换list-style: nonewith list-style-position: inside或速记list-style: inside：

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

回答by Jpsy

My preferred solution to remove <ul> indentation is a simple CSS one-liner:

我首选的去除 <ul> 缩进的解决方案是一个简单的 CSS 单行：

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

This solution is not only lightweight, but has multiple advantages:

该解决方案不仅轻量级，而且具有多种优势：

• It nicely left-aligns <ul>'s bullet points to surrounding normal paragraph text (= indenting of <ul> removed).
• The text blocks within the <li> elements remain correctly indented if they wrap around into multiple lines.

• 它很好地将 <ul> 的项目符号点与周围的普通段落文本左对齐（= 删除了 <ul> 的缩进）。
• 如果 <li> 元素中的文本块环绕成多行，它们将保持正确缩进。

---

---

Legacy info:
For IE versions 8 and below you must use margin-left instead:

旧版信息：
对于 IE 8 及以下版本，您必须使用 margin-left 代替：

    ul { margin-left: 1.2em; }

回答by Graham

Add this to your CSS:

将此添加到您的 CSS：

ul { list-style-position: inside; }

This will place the li elements in the same indent as other paragraphs and text.

这会将 li 元素置于与其他段落和文本相同的缩进中。

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

参考：http: //www.w3schools.com/cssref/pr_list-style-position.asp

回答by Dov Miller

display:table-row;will also get rid of the indentation but will remove the bullets.

display:table-row;也将摆脱缩进，但会删除子弹。

回答by John Conde

Remove the padding:

删除填充：

padding-left: 0;

回答by Gary Ford

I have the same problem with a footer I'm trying to divide up. I found that this worked for me by trying few of above suggestions combined:

我在尝试拆分页脚时遇到了同样的问题。我发现通过尝试结合上述几个建议，这对我有用：

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

This seems to keep it to the left under my h1 and the bullet points inside the div rather than outside to the left.

这似乎将它保持在我的 h1 下方的左侧，而项目符号点位于 div 内部而不是左侧。

回答by naeluh

Can you provide a link ? thanks I can take a look Most likely your css selector isnt strong enough or can you try

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

padding:0!important;

padding:0!important;

回答by Corey

Live demo: https://jsfiddle.net/h8uxmoj4/

现场演示：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: "●";
}

Since the original question is unclear about its requirements, I attempted to solve this problem within the guidelines set by other answers. In particular:

由于最初的问题不清楚其要求，我试图在其他答案设定的指导方针内解决这个问题。特别是：

• Align list bullets with outside paragraph text
• Align multiple lines within the same list item

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

I also wanted a solution that didn't rely on browsers agreeing on how much padding to use. I've added an ordered list for completeness.

我还想要一个不依赖于浏览器就使用多少填充达成一致的解决方案。为了完整性，我添加了一个有序列表。

回答by Jael Faulcon 323-743-3816

Doing this inline, I set the margin to 0 (ul style="margin:-0px"). The bullets align with paragraph with no overhang.

执行此内联操作，我将边距设置为 0（ul style="margin:-0px"）。项目符号与段落对齐，没有悬垂。