html - Keep UL > LI content inline -


I am currently struggling to create a horizontal anarch list through HTML and CSS. Ideally, I can add other elements within each line and it will maintain its horizontality.

Here is the CSS / html which 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 & gt; Li {Padding: 10px; Display: Inline; }  
  & lt; Div class = "map-sub-container" & gt; & Lt; Ul class = "map-sub-nav" & gt; & Lt; Li & gt; & Lt; Div & gt; & Lt; H1 & gt; Hello & lt; / H1> & Lt; P & gt; I am a paragraph & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div & gt; & Lt; H1 & gt; Bye & lt; / H1> & Lt; P & gt; I am a paragraph & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;      

Am I completely wrong about this? & lt; Li & gt; element is not possible to add nest additional elements and continue to display inline ? Thank you in advance.

  .map-sub-container {background color: red; Border: Solid 2px black; } .map-sub-nav {list-style-type: none; } .map-sub-nav & gt; Li {Padding: 10px; Display: Inline; Posistion: relative; Swim left; Width: 45%; Margin: 0 auto; }  
  & lt; Div class = "map-sub-container" & gt; & Lt; Ul class = "map-sub-nav" & gt; & Lt; Li & gt; & Lt; Div & gt; & Lt; H1 & gt; Hello & lt; / H1> & Lt; P & gt; I am a paragraph & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div & gt; & Lt; H1 & gt; Bye & lt; / H1> & Lt; P & gt; I am a paragraph & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div style = "clear: both;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt;  


Comments

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

html - CSS autoheight, but fit content to height of div -

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -