<ul> within another <ul> inherits style
Solution 1
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important
can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
Solution 2
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
Bojangles
Full stack web developer working with Node and React in Typescript and rather a lot of Rust.
Updated on June 04, 2022Comments
-
Bojangles almost 2 years
I have the following structure in some HTML:
<ul class="li_inline"> <li> <ul class="li_block"> <li>Stuff</li> <li>Stuff under stuff</li> </ul> </li> <li> <ul class="li_block"> <li>Stuff</li> <li>Stuff under stuff</li> </ul> </li> </ul>
With the CSS like this:
.li_inline li { display: inline; } .li_block li { display: block; }
What I would like to happen is to have the two inner
<ul>
s side by side, but any<li>
s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).Can someone suggest some CSS I can use so that the inner (
li_block
) lists'<li>
elements are displayed as block elements, but the<ul>
s themselves are displayed side by side?Thanks,
James