Second line in li starts under the bullet after CSS-reset
HtmlCssHtml Problem Overview
I'm having some problems with my ul
-list after using applying CSS-reset.
When the text in the li
is long and it breaks to a second line, the text begins under the bullet. I'd like it to start with the same margin/padding as the text on the right side of the bullet.
Sort of hard to explain, but if you look at the example-image. The left-image is the list today. "motta varsel [...]" begins under the bullet, but I'd like it to look the picture on the right.
How can I do this with CSS? I assume there is something very simple I've overlooked, but I can't figure out what. Google searches did not return anything useful either.
Html Solutions
Solution 1 - Html
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 :)
Solution 2 - Html
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/
Solution 3 - Html
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;
}
Solution 4 - Html
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>