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

<分区>

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

谁能建议如何使用 css 水平显示图像？

我试过了:

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

最佳答案

我个人会使用 flexbox 来实现这一点

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

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

关于javascript - 为什么图像不能在 css 中水平显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42202662/

上一篇：css - 在(背景)图像周围制作不透明边框

下一篇：html - 如何让内容出现在div前后

相关文章：

php - 检查ajax请求的失败和成功

javascript - Jquery .on() 的问题

javascript - 在alert()完成后提交表单

javascript - JSP : How to link form select option to Java object

javascript - 如何检测div中水平滚动的结束？

javascript - 对 DataTable 中的特定数据进行排序

javascript - Express res.render 没有渲染页面

javascript - 在 div 内滚动大图像

javascript - 加载图像到 document.body 背景

html - 是否可以将方形图像放在椭圆形图像上？