Question

我不确定如何让我的图像以内联方式显示（如水平相邻）。目前他们在彼此之下。我的想法是为整个页面设置一个包装器，然后是图像'homepageImageBanner'的div，并且只使用display-inline作为该div，但也许我需要专门定位图像以显示它们内联？

.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

＆＃13;

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

＆＃13;

<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>

＆＃13;

由于li实际上是block级元素，因此您只需将display: inline-block;添加到li元素。

Answer 2

.homepageImageBanner {
    width: 80%;
    margin: auto;
    display:inline-block;
}

=＆GT; div具有80％的包含元素，即它们中没有两个会成为一行，这会导致它们在彼此之下显示。

为什么我的图像不显示内联

2 个答案: