为什么图像不能在css中水平显示？

Question

我尝试使用css水平显示图像，但它不起作用？

任何人都可以建议如何使用CSS水平显示图像？

这是我的代码 https://jsfiddle.net/urLdLdLm/3/

我试过了：

.outer {width:1000px; margin:0 auto 0 auto;
.outer li img{ display: inline-block;}

.outer {width:1000px; margin:0 auto 0 auto;}
.outer li img{ display: inline-block;}

<div class="outer">
  <ul>
    <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
    <li><img alt=""   src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li>
     <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
 <li><img alt=""   src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
  </ul>
</div>

Answer 1

我个人会使用flexbox来完成

＆＃13;

＆＃13;

.outer {
  width: 1000px;
  margin: 0 auto;
}
.outer ul {
  display: flex;
  list-style-type: none;
  align-items: flex-end;
}

＆＃13;

<div class="outer">
  <ul>
    <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
    <li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA">
    </li>
    <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
    <li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题不是您的图片，而是列表，默认情况下会将var html = tableWlcData.join("\n"); console.log(html); dataTable.html(html); 个孩子显示在彼此之下。

li

将解决此问题。

.outer li,
.outer li img {
  display: inline-block;
}

.outer {width:1000px; margin:0 auto 0 auto;}
.outer li,
.outer li img{ display: inline-block;}