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> 

http://jsfiddle.net/nxc8z/


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

c# - must be a non-abstract type with a public parameterless constructor in redis -

ajax - PHP/JSON Login script (Twitter style) not setting sessions -