Keep UL > LI content inline

Question

I'm struggling at the moment to create a horizontal unordered list using HTML and css. Ideally, I would be able to add other elements within each line and it would maintain its horizontalness.

Here is the css/html I am currently working with:

 .map-sub-container { background-color: red; border: solid 2px black; } .map-sub-nav { list-style-type: none; } .map-sub-nav > li { padding: 10px; display: inline; } 

 <div class="map-sub-container"> <ul class="map-sub-nav"> <li> <div> <h1>Hello</h1> <p>I am a paragraph</p> </div> </li> <li> <div> <h1>Goodbye</h1> <p>I am a paragraph</p> </div> </li> </ul> </div> 

Am I going about this completely wrong? Is it not possible to nest additional elements in a <li> element and continue to display inline ? Thank you in advance.

Answer 1

 .map-sub-container { background-color: red; border: solid 2px black; } .map-sub-nav { list-style-type: none; } .map-sub-nav > li { padding: 10px; display: inline; posistion:relative; float:left; width: 45%; margin: 0 auto; } 

 <div class="map-sub-container"> <ul class="map-sub-nav"> <li> <div> <h1>Hello</h1> <p>I am a paragraph</p> </div> </li> <li> <div> <h1>Goodbye</h1> <p>I am a paragraph</p> </div> </li> </ul> <div style="clear:both;"></div> </div>