CODEWITHSUNDEEP
htmlcss
Petey
Petey

Reputation: 64

Hanging Indent For Unordered List Items In Paragraph

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?

Upvotes: 1

Views: 1140

Answers (1)

Adjit
Adjit

Reputation: 10305

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>

Upvotes: 1

Related Questions