Question

我们有一个项目，我们试图在同一条线上显示2个图像。目前，他们是一个在另一个之上。

＆＃13;

.footer-primary .awards {
  display: inline;
}

@media screen and (min-width: 47.5em) {
  .footer-primary .awards {
    float: left;
    display: inline;
    margin-right: 2.35765%;
    width: 82.94039%;
    margin-top: 1em;
  }
  .footer-primary .awards:last-child {
    margin-right: 0;
  }
}

.footer-primary .awards li {
  display: inline;
}

.footer-primary .awards li a {
  float: left;
  height: 10px;
  margin-right: 1.5em;
  width: 330px;
}

.footer-primary .awards li a.class1 {
  background: url("img1") 0 0 no-repeat;
  background-position: -6px 0px;
  height: 120px;
}

.footer-primary .awards li a.class2 {
  background: url("img2") 0 0 no-repeat;
  background-position: -6px 10px;
  height: 120px;
}

＆＃13;

<div class="community">
  <ul class="awards">
    <li>
      <a target="_blank" href="URL1" class="class1"></a>
    </li>
    <li>
      <a target="_blank" href="URL2" class="class2"></a>
    </li>
    <li>
      <a class="class3"></a>
    </li>
  </ul>
</div>

＆＃13;

我们如何更新CSS以使img1和img2在同一行？

Answer 1

您可以将图像周围的li元素包装到容器div中，并将float值添加到容器和子元素中

<div class="community">
  <ul class="awards">
   <div class="container">
    <li><a target="_blank" href="URL1" class="class1">TEST1</a></li>
    <li><a target="_blank" href="URL2" class="class2">TEST2</a></li>
   </div>
   <li><a class="class3">TEST3</a></li>
  </ul>
</div>

.container{
  float:left;
  width: 100%;
}
 .container li{
  float:left;
}

使用HTML和CSS内联添加多个图像

1 个答案: