title: Display images in list-inline
body: <p>I want to display images inline, but instead of this they appear vertically and the horizontal scrollbar isn't come up. How can i make the screen scrollable without define exact width and how can i format the images to smaller than the screen vertically without explicit height? No js tricks. Thx</p>
  
  <pre><code>&lt;section class="project-section"&gt;
  &lt;ul class="list-inline"&gt;
      &lt;li&gt;
          &lt;article class="project-data"&gt;
              &lt;h1&gt;@Model.CurrentTitleText()&lt;/h1&gt;
              &lt;p&gt;@Model.CurrentDescriptionText()&lt;/p&gt;
          &lt;/article&gt;
      &lt;/li&gt;
      @foreach (var elem in Model.ProjectInclude)
      {
          &lt;li&gt;
              &lt;article class="project-item-container fit-container"&gt;
                  &lt;img class="fit-container" src="@Url.Action("Render", "Image", new { file = elem.Media.FileName })/" /&gt;
                  @if (!string.IsNullOrEmpty(elem.Media.CurrentTitleText()))
                  {
                      &lt;h6&gt;@elem.Media.CurrentTitleText()&lt;/h6&gt;
                  }
                  @if (!string.IsNullOrEmpty(elem.Media.CurrentDescriptionText()))
                  {
                      &lt;p&gt;@elem.Media.CurrentDescriptionText()&lt;/p&gt;
                  }
              &lt;/article&gt;
          &lt;/li&gt;
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Css:</p>
  
  <pre><code>.project-section {
      padding-top: 50px;
      padding-bottom: 50px;
      max-height: 100%;
  }
  
  .fit-container {
      max-width: 100%;
      max-height: 100%;
  }
  
  .project-itemlist {
      max-height: 100%;
  }
  
  .project-item-container {
      max-height: 100%;
  }     
  </code></pre>