在列表内联中显示图像

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;

  }

Answer 2

我做了一个codepen 并模拟了你的html。当我这样做时，它会正确显示。我建议您检查以确保正在加载引导程序。如果您正确加载引导程序，list-inline 类已经设置为 display: inline-block。

<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%;
}