CSSでイメージが横に表示されないのはなぜですか？

-1

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

出典

2017-02-13 user944513

は 'ディスプレイ置くことを達成するためにflexboxを使用します。' .outer li'にインラインblock'を、 '.outer li img'ではありません –

あなたの質問の完全な内容はあなたの質問で**でなければなりませんリンクされているだけではありません。リンクが腐って、将来の質問やその回答が役に立たなくなり、人々はあなたを助けるためにオフサイトに行く必要はありません。スタックスニペット（ '<>'ツールバーボタン）を使用して理想的に[mcve] **を実行可能にします。その他：[*どうすれば良い質問をすることができますか？]（/ help/how-to-ask） –

私はそれを試してみましたが、動作していません – 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

私は個人的に

.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でイメージが横に表示されないのはなぜですか？

答えて

関連する問題