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
Post a Comment