title: Allign images in same line
body: <p>Please someone help me as i am learning web development.I am facing two problems
  1:How can i allign all the images in same line as my last image goes down
  2:the price beneath image  i want to aliign right on the last corner of images</p>
  
  <pre><code>    [&lt;section id ="featured"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                  &lt;img src="C:\xampp\htdocs\psdword\images/thumb-1.jpg"&gt;
                      &lt;a href=""&gt;Fugiat nulla sint&lt;/a&gt;
                      &lt;span&gt;$30&lt;/span&gt;
                      &lt;span class="rating"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                  &lt;img src="C:\xampp\htdocs\psdword\images/thumb2.jpg"&gt;
                      &lt;a href=""&gt;Daute irure dolor&lt;/a&gt;
                      &lt;span&gt;$24&lt;/span&gt;
                      &lt;span class="rating"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                  &lt;img src="C:\xampp\htdocs\psdword\images/thumb3.jpg"&gt;
                      &lt;a href=""&gt;Officia deserunt mollit&lt;/a&gt;
                      &lt;span&gt;$60&lt;/span&gt;
                      &lt;span class="rating"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                  &lt;img src="C:\xampp\htdocs\psdword\images/thumb4.jpg"&gt;
                      &lt;a href=""&gt;Pim minim veniam&lt;/a&gt;
                      &lt;span&gt;$17&lt;/span&gt;
                      &lt;span class="rating"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/section&gt;
  
      #featured ul{
      padding: 0;
  }
  #featured li{
      float: left;
      width: 23%;
      margin: 1%;
      list-style-type: none;
  }
  #featured li img{
      width: auto;
      margin-bottom: 10px;
  
  }
  #featured li a{
      color: #333;
      text-decoration: none;
      float: left;
  }
  #featured li span{
      float: right;
      clear: left;
      color: #333;
  }
  #featured ul:after{
      content: "";
      display: block;
      clear: both;
  }
  </code></pre>
  
  <p>Kindly look at this image
  <a href="http://i.stack.imgur.com/AVHO0.png" rel="nofollow">Screenshot</a></p>