html - My elements are not going on the same line - using "display:inline" -
please take @ code , tell me i'm doing wrong? want "hi" go right of table. i've tried putting "float:left" on elements , on each individually.
<div style="display:inline"> <h1>heading</h1> <ul> <li><h4>reason 1</h4></li> <li><h4>reason 2</h4></li> <li><h4>reason 3</h4></li> <li><h4>reason 4</h4></li> <li><h4>reason 5</h4></li> </ul> <h1>hi</h1> </div>
display property not inherited child elements. have specify li
specifically, or else default display of list-item
used li
<div> <h1>heading</h1> <ul> <li style="display:inline"><h4>reason 1</h4></li> <li style="display:inline"><h4>reason 2</h4></li> <li style="display:inline"><h4>reason 3</h4></li> <li style="display:inline"><h4>reason 4</h4></li> <li style="display:inline"><h4>reason 5</h4></li> </ul> <h1>hi</h1> </div>
and remove mess css
<style> #inline-list li{ display: inline-block;//or inline } </style> <div> <h1>heading</h1> <ul id="inline-list"> <li><h4>reason 1</h4></li> <li><h4>reason 2</h4></li> <li><h4>reason 3</h4></li> <li><h4>reason 4</h4></li> <li><h4>reason 5</h4></li> </ul> <h1>hi</h1> </div>
or want this? heading, list , other heading in same line?
<div> <h1 style="float:left">heading</h1> <ul style="float:left"> <li><h4>reason 1</h4></li> <li><h4>reason 2</h4></li> <li><h4>reason 3</h4></li> <li><h4>reason 4</h4></li> <li><h4>reason 5</h4></li> </ul> <h1 style="float:left">hi</h1> </div>
Comments
Post a Comment