Hanging Indent For Unordered List Items In Paragraph

Question

I've been trying to indent the second+ line of text in an unordered list that resides within paragraph text so that all rows are even. However, when I insert the styles below, it messes with the main nav.

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}

I've also tried p.ul and p ul as well, but no luck. Any suggestions?

Parapgraphs should not contain lists - http://stackoverflow.com/questions/3191327/nest-lists-in-paragraphs-in-html — Paulie_D, Sep 16 '15 at 14:38
`code`
Requirements:

3 months in business

$5k minimum monthly credit card sales OR $15k minimum monthly revenue

Must deposit at least 10 times per month

`code` — Petey, Sep 16 '15 at 14:47

score 1 · Accepted Answer · edited May 23 '17 at 12:29

You need to use a CSS selector that only goes after nested list elements.

i.e.

ul > ul { Will select first nested ul }
ul ul { Will select all nested ul's NOT including the parent ul }

Or in your case -

p > ul { }

That may work, but without seeing your markup its hard to be exactly accurate.

Another option - add class names to make it easier for CSS to select specific elements

i.e.

<p class="info-block">
   <ul>
       <li>Some list Item</li>
   </ul>
</p>

CSS

.info-block ul { padding-left: 1em; }

But as Paulie_D said - Paragraphs should not contain lists Nest lists in paragraphs in html

Instead I would suggest using a <div>

Switched to using a div and this solution worked. Thank you very much! — Petey, Sep 16 '15 at 14:52

Hanging Indent For Unordered List Items In Paragraph

Requirements:

1 Answers1