title: Horizontal alignment of list items
body: <p>I want to align the list items horizontally. But i'm not getting them in a line. If i remove the br tag inside the first li then its aligning perfectly. What am i missing? please help. jsfiddle code -> <a href="http://jsfiddle.net/ErDeP/" rel="noreferrer">here</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="info_new_cont"&gt;
  &lt;ul id="info_new_ul"&gt;
      &lt;li id="app_no_li"&gt;
          &lt;div&gt;
              &lt;div id="app_no_title"&gt;Appn&lt;br&gt; No:&lt;/div&gt;
  
              &lt;div id="app_no" class="info_new_bottom"&gt;42382464&lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="new_li"&gt;
          &lt;div&gt;mcs&lt;/div&gt;
          &lt;div id="new_case" class="info_new_bottom"&gt;New Case&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="ifw_li"&gt;
          &lt;div&gt;ld&lt;/div&gt;
          &lt;div id="file_wrap" class="info_new_bottom"&gt;More Info&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the style</p>
  
  <pre><code>#info_new_cont {
  
  float: right;
  
  display: inline-block;
  
  width: 500px;
  
  height: 100%;
  
  margin: 0px;
  
  }
  
  #info_new_ul {
  
  list-style: none;
  
  margin: 0px;
  
  width: 400px;
  
  height: 140px;
  
  }
  
  #info_new_ul li {
  
  display: inline-block;
  
  padding: 5px;
  
  color: #fff;
  
  font-family: trebuchet ms;
  
  font-size: 19px;
  
  font-weight: lighter;
  
  text-align: justify;
  
  word-wrap:break-word;
  
  }
  
  .info_new_bottom {
  margin-top:30px;
  }
  
  #app_no_li {
  
  width: 120px;
  
  height: 120px;
  
  background-color: #00ddff;
  
  }
  
  #app_no_cont {
  
  white-space: nowrap;
  
  }
  
  #app_no_title {
  
  }
  
  #app_no {
  
  font-weight: bold;
  
  }
  
  #new_li {
  
  width: 120px;
  
  height: 120px;
  
  background-color: #eee;
  
  }
  
  #ifw_li {
  
  width: 120px;
  
  height: 120px;
  
  background-color: #eee;
  
  }
  </code></pre>