CODEWITHSUNDEEP
htmlcss
OptimusCrime
OptimusCrime

Reputation: 14863

Second line in li starts under the bullet after CSS-reset

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.

enter image description here

Upvotes: 94

Views: 171100

Answers (5)

Seb Drew
Seb Drew

Reputation: 1

I found Dipak's answer the best solution for me (Thanks Dipak!), however I needed to add a comma between the ul and li. List Style Type wasn't a concern for me and I only used padding-left, also 1.5em for text-indent.
My list was within multiple div's, so this might have also been a contributing factor.

ul, li{
    list-style-position: inside;
    padding-left: 20px;
    text-indent: -1.5em;
}

Upvotes: 0

JayDev95
JayDev95

Reputation: 1104

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>

Upvotes: 0

Tim S.
Tim S.

Reputation: 13843

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 :)

Upvotes: 195

Rajesh Rajan
Rajesh Rajan

Reputation: 249

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

Upvotes: 24

Dipak
Dipak

Reputation: 12190

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/

Upvotes: 43

Related Questions