Removing default styling from HTML list elements - html

Question

So I have some code that looks like:
<ul>
<li>
<ul>
<li> ... </li>
</ul>
</li>
</ul>
This has indented itself. I have no styling to indent this. According to the computed styling there is no margin-left, yet everything is actually indented, I guess this is the default behaviour of nested ul elements?
Regardless, on every nested ul, I have a class that is called comment-children I need to say only 5 down can indent (so .comment-children .comment-children .comment-children .comment-children .comment-children done, great) but at a width of 640px, all nesting must be turned off.
The part I am having the trouble with is that the ul elements are nested by default http://jsfiddle.net/d7az0jv3/
What do you want to do
Remove all default nesting and let me nest it my self via the class comment-children
At 640px remove all nesting.

Answer 1

Your example is insufficient to demonstrate what you want to do involving the class comment-children, but generally, to remove the indentation on lists across browsers, you should implement the rules
ul, li { margin-left: 0; padding-left: 0; }
Here's an updated jsfiddle
If you want to only nest elements up to a certain level, my recommendation would be to apply a class to the base ul that sets the indentation, and then add a rule that stops the indentation at a certain depth below that base class. Here is an updated version of your code with the nesting stopping at level 5.
HTML:
<ul class="comment">
<li>level one</li>
<li>
<ul>
<li>level two</li>
<li>
<ul>
<li>level three</li>
(etc., up to level seven)
CSS:
ul {
list-style:none;
}
ul, li { /* reset the margin and padding */
margin: 0;
padding: 0;
}
.comment ul {
/* 1 em margin for the UL elements under .comment */
margin-left: 1em;
}
.comment ul ul ul ul ul {
/* stop the nesting! */
margin-left: 0;
}
jsfiddle for this