爲什麼圖像不能在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中水平顯示？

回答

相關問題