html - 在列表内联中显示图像

Question

我想内联显示图像，但它们不是垂直显示的，而是没有出现水平滚动条。如何在不定义确切宽度的情况下使屏幕可滚动，以及如何在没有明确高度的情况下将图像格式化为垂直小于屏幕？没有js技巧。谢谢

<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

你必须让你的列表内联显示:

CSS:

 .list-inline li{

   display:inline-block;

  }