html - 为什么我的图像没有内联显示

Question

我不确定如何让我的图像以内嵌方式显示(如水平并排显示)。目前，它们彼此下方。我的想法是为整个页面设置一个包装器，然后为图像“homepageImageBanner”设置一个 div，然后为该 div 使用 display-inline 但也许我需要专门针对图像以内联显示它们？

.wrapper {
  width: 80%;
  margin: auto;
}
.homepageImageBanner {
  width: 80%;
  margin: auto;
  display: inline-block;
}
.homepageImageBannerList {
  list-style-type: none;
}
.sgaBadge {
  width: 200px;
  height: 200px;
  border: 0;
}
.lgaBadge {
  width: 120px;
  height: 120px;
  border: 0;
}
.egLogo {
  border: 0;
}

<div class="wrapper">
  <!-- Images -->
  <div class="homepageImageBanner">
    <ul class="homepageImageBannerList">
      <li>
        <a href="http://www.sga.org/" target="_blank">
          <img class="sgaBadge" alt="sga logo" src="http://placehold.it/200x200" />
        </a>
      </li>
      <li>
        <a href="http://www.lga.org.uk/" target="_blank">
          <img class="lgaBadge" alt="lga logo" src="http://placehold.it/120x120" />
        </a>
      </li>
      <li>
        <a href="http://eg.com/" target="_blank">
          <img class="egLogo" alt="eg logo" src="http://placehold.it/50x50" />
        </a>
      </li>
    </ul>
  </div>

Answer 1

因为 li 是 block 元素。将其更改为内联

.homepageImageBannerList li{
 display:inline-block
}

DEMO