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

-1

任何人都可以建议如何水平显示图像使用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>

来源

2017-02-13 user944513

把'显示：直列block'的'.outer li'，而不是'.outer li img' –

你问题的全部内容必须是**你的问题不只是联系在一起。链接腐烂，使问题及其答案在未来的人们中毫无用处，人们不应该离开现场去帮助你。在**问题中放置一个[mcve] **，最好使用Stack Snippets（'<>'工具栏按钮）使其可运行。更多：[*我怎么问一个好问题？*]（/帮助/如何问） –

我试过这样，但它不起作用 – user944513

的问题是不是你的图像，但列表，默认情况下显示其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;}

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

来源

2017-02-13 11:13:48 Connum

@downvoter：可能是麻烦解释你的原因？ – Connum

我个人会用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>

来源

2017-02-13 11:44:32 LGSon

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

回答

相关问题