The Html ordered List is displaying in next line - html

Question

I have used html and css code below My aim is to display master,image and list in single line.but list is displaying in next line so pls help me to rectify the issue.
HTML
<h2> Master <img src="<?php echo base_url('img/courses_title.jpg'); ?>" HEIGHT="55" WIDTH="55" BORDER="0" /><div align="center"> <ul class="Data"><li> 1.Course code and name is created </li></ul></h2>
CSS
<style type="text/css">
.pg-normal {
color: green;
font-weight: normal;
text-decoration: none;
cursor: pointer;
background: #e3e3e3;
border: 1px solid #cac9c9;
padding: 4px 7px;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
.Data {
width:20%;
margin: 10px;
-moz-border-radius : 10px; /* Firefox */
-webkit-border-radius : 10px; /* Safari & Chrome */
-khtml-border-radius : 10px; /* Linux browsers */
border-radius : 10px; /* CSS3 compatible browsers */
border-style: solid;
border-width: 1px;
border-color: #cccccc;
padding: 0px;
border-spacing: 0px;
overflow: hidden;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
</style>

Answer 1

Please take a look at this JsFiddle.
I have added an example based off your above HTML, here is the HTML code:
<h2>Master</h2>
<img src="/path/" alt="example" />
<ul>
<li>1. Course code and name is created</li>
</ul>
CSS:
img, ul {
float: left;
}
ul {
margin: 0;
}

Answer 2

It's displaying in the next line because it is a block element.
Most HTML elements are defined as block level elements or as inline
elements.
Block level elements normally start (and end) with a new line when
displayed in a browser.
Inline elements are normally displayed without starting a new line.
That is the main concept, as to why your li appears on separate lines.
if you want your li element to appear on the same line, you'll have to implement it in the inline form, like so:
<li style="display:inline;">content</li>
if you want all your lis to be inline do this:
<style>
li{
display:inline;
}
<style>
just add it to the head section of your page.

Answer 3

try this one
http://jsfiddle.net/nY6eu/1/
add this to your code
css file:
.ul{
list-style:none;
}
.ul li{
display:inline-block;
}
html file:
<ul class="ul"><li><h2> Master </h2></li>
<li><img src="http://img.talkandroid.com/uploads/2013/03/wpid-photo-jan-14-2013-1115-am.jpg" HEIGHT="55" WIDTH="55" BORDER="0" /></li> <li class="Data"> 1.Course code and name is created </li>
</ul>