Display images in list-inline - html

Question

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
<section class="project-section">
<ul class="list-inline">
<li>
<article class="project-data">
<h1>#Model.CurrentTitleText()</h1>
<p>#Model.CurrentDescriptionText()</p>
</article>
</li>
#foreach (var elem in Model.ProjectInclude)
{
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="#Url.Action("Render", "Image", new { file = elem.Media.FileName })/" />
#if (!string.IsNullOrEmpty(elem.Media.CurrentTitleText()))
{
<h6>#elem.Media.CurrentTitleText()</h6>
}
#if (!string.IsNullOrEmpty(elem.Media.CurrentDescriptionText()))
{
<p>#elem.Media.CurrentDescriptionText()</p>
}
</article>
</li>
}
</ul>
Css:
.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%;
}

Answer 1

You have to make your list display inline:
CSS:
.list-inline li{
display:inline-block;
}

Answer 2

I made a codepen and mocked up your html. When I do so it displays correctly. I would suggest you check to ensure bootstrap is being loaded. The list-inline class is already set to display: inline-block if your properly loading bootstrap.
<section class="project-section">
<ul class="list-inline">
<li>
<article class="project-data">
<h1>Inline Images</h1>
<p>Lorem ipsum</p>
</article>
</li>
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="http://www.placehold.it/200x200" />
<h6>Sample text</h6>
<p>Lorem ipsum blah blah blah</p>
</article>
</li>
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="http://www.placehold.it/200x200" />
<h6>Sample text</h6>
<p>Lorem ipsum blah blah blah</p>
</article>
</li>
<li>
<article class="project-item-container fit-container">
<img class="fit-container" src="http://www.placehold.it/200x200" />
<h6>Sample text</h6>
<p>Lorem ipsum blah blah blah</p>
</article>
</li>
</ul>
.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%;
}