イメージは水平にならず、2行に積み重なる。

http://boomboomdesigns.com/nomoon/index.html これは問題のページです。私は、ページ幅を増やすためにヘッダ要素のCSSを修正しようとしましたが、それは右に移動します。イメージは水平にならず、2行に積み重なる。

私は何かを見落としていると確信していますが、私はSanctisとComingのすぐ近くのイメージをすべて水平に1行に表示しようとしています。

ご協力いただければ幸いです。

HTML： http://pastebin.com/dePc9qRR

出典

2017-02-07 Jonny Dee

ここに意味のあるコードと問題の説明を追加してください。修復が必要なサイトにリンクしないでください。そうしないと、問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例（MCVE）]を投稿すると（）、より良い回答を得るのに役立ちます（http://stackoverflow.com/help/mcve）。詳細については、 [私のWebサイトの何かが動作しません。リンクを貼り付けることはできますか？]（http://meta.stackexchange.com/questions/125997/）ありがとう！ – j08691

画像が積み重なっているのは、含まれている要素の幅がそれらを強制しているからです。要素をより広くすると、画像は積み重なりません。 – TricksfortheWeb

あなたは正しい軌道に乗っているが...ただ、ヘッダの幅を大きくするだけでなく、同様のmargin-left属性を減らします。これらの値は、私の仕事：

padding: 2.875em 1.875em 1.875em; 
position: absolute; 
z-index: 1000; 
top: 25%; 
width: 1100px; 
height: 300px; 
left: 50%; 
margin-top: -150px; 
margin-left: -550px; 
text-align: center;

出典

2017-02-07 22:07:09 daniel0mullins

ありがとうございました!!!! –

を代わりにフロートを使用して、あなたはおそらくCSSからフレックス機能を使用したいと思います。適切な調整で問題を解決します。それを使用する方法の下のリンクを参照してください。

Flex tricks

出典

2017-02-07 22:12:51 mbeso

ジョニー・ディー、あなたは私たちが最初に解決すべきいくつかのコーディングエラーを持っています。

まず、<br />タグは自己閉鎖であり、つまり</br>タグがないことを意味します。

第2に、<li></li>さんの中には、</li>タグの前に閉じる<a>タグがありませんでした。

イメージを並べて並べるためのコードは基本的にはdisplay: inlineをdisplay: inline-blockに変更するだけです。その後、それは動作します。

また、CSSを外部ファイルに移動することをお勧めします。この方法では、Webページがより速く読み込まれ、それほど遅くなることはありません。

エラーを修正してCSSをdisplay: inline-blockに変更した場合は正常に動作するはずです。

希望すると便利です。幸運。

出典

2017-02-07 22:30:41

イメージは水平にならず、2行に積み重なる。

答えて

関連する問題