Ul no margin on the first level of the nested list?

Question

I need a list of styles that has no margin on the left in the first level. But on subsequent, aligned sublists ... Does anyone know how to do this?

<ul> <li>no margin</li> <li> <ul> <li>yes margin</li> </ul> </li> </ul> 

(without adding css classes to the first ul level or changing any code)

Answer 1

Is the first ul a direct descendant of the body? I know that you said that you are not adding css classes to the code, but I believe that adding material to the stylesheet does not exclude the question? If so, you can use a style declaration, for example:

 body > ul{ margin-left:0px; } 

or if you know the div, it is inside:

 #your_id > ul{ margin-left:0px; } 

A default addition may also be required.

thanks

Answer 2

If you want this to apply to all <ul> on every page, a stylesheet is applied, this works:

 ul {/* Remove margin for all <ul>s (and padding, because different browsers have different default styles) */ margin-left: 0; padding-left: 0; } ul ul {/* Add a margin for any <ul> inside another <ul> */ margin-left: 2em; } 

But if you want it to apply to certain lists, you need to add something to the HTML to identify those lists (as other answers suggested).

Answer 3

You should probably clear the main <ul> field and then set the field value for <ul> in the <li> element.

 ul { margin-left: 0px; } li > ul { margin-left: 10px; } 

Answer 4

Indeed, but a small addition to TommyBs answers: you need to apply the identifier that you use in the html list item tag, for example:

 <ul> <li id="your_id">no margin</li> <li> <ul> <li>yes margin</li> </ul> </li> </ul> 

And in css the corresponding line will be

 li#your_id { margin-left:0px; } 

Answer 5

In my case, there were default fields, and I set them to 0 -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;