在 CSS 重置后，li 中的第二行从项目符号下面开始

在使用 CSS 重置后，我的 ul列表出现了一些问题。

当 li中的文本很长并且断开到第二行时，文本从项目符号下面开始。我希望它以与子弹右侧的文本相同的边距/填充开始。

有点难以解释，但如果你看这个例子-图像。左图是今天的列表。“ motta varsel [ ... ]”在子弹下面开头，但我希望它看起来像右边的图片。

我如何使用 CSS 做到这一点？我想我忽略了一些很简单的东西，但我想不出是什么。谷歌搜索也没有返回任何有用的信息。

enter image description here

158382 次浏览
小开

Here is a good example - 

ul li{
list-style-type: disc;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}

Working Demo: http://jsfiddle.net/d9VNk/

小开
最佳答案

The li tag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it’s set to inside. That makes your text wrap around it. If you set it to outside, the text of your li tags will be aligned.

The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.

ul li {
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the list’s container
*/
list-style-position: outside;


/*
* Because the bullet is outside of the list’s
* container, indent the list entirely
*/
margin-left: 1em;
}

Edit 15th of March, 2014 Seeing people are still coming in from Google, I felt like the original answer could use some improvement

  • Changed the code block to provide just the solution
  • Changed the indentation unit to em’s
  • Each property is applied to the ul element
  • Good comments :)
小开

I second Dipaks' answer, but often just the text-indent is enough as you may/maynot be positioning the ul for better layout control.

ul li{
text-indent: -1em;
}
小开

I would set the fish in a :before style in css. Also you have a spelling mistake in your HTML. It should be <ul>. Font Awesome should give you the code to put into content.

li {
padding: 0% 0% 5% 3%;
width: 100%;
list-style-position: outside;
position: relative;
}


li:before {
content: '';
position: absolute;
width: 5px;
height: 5px;
background: black;
top: 10px;
left: -5px;
}
<div class="col">
          

<ul>
<p class="col align-self-center">
<li>5% marketing and strategic alliances</li>
<li>10% Metadata release (Rarity tools) Focus on community growth</li>
<li>25% Listing in Magic Eden</li>
<li>50% First Donation to partners</li>
<li>65% Increase in marketing investment</li>
<li>80% Bluepaper Publication of Phase 2</li>
<li>100% Second Donation to partners</li>
</p>
</ul>
</div>


</div>


提交答案