スマホで閲覧したときに、画像つきのコンテンツを横にスクロールさせたい
PCでは一列に横に並んでいるコンテンツを、
スマホで閲覧した際に、コンテンツが2つ並び、それ以降はスクロールをさせたいです。
発生している問題・エラーメッセージ
・横ではなく縦に並んでしまう
・他の画像やテキストもいっしょにずれる
試したこと
他サイト様などのコードもコピペなどで試していますが、
うまく表示ができません。
追記です。
ありがとうございます。
コードは以下を使用しました。
cssがPCとスマホ用に分かれており、どちらに記述すればいいのか迷っています。
(もともとあったデータ・コードに私が手を加えている状況です)
画像やテキストは恐らく指定が重複してしまっていて、
今回表示をさせたい場所とは別の場所がずれてしまいます。
<div class="nav-wrap"> <div class="scroll-nav"> <ul> <li> <a href="url" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text</p></li> <li><a href="URL" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text </p></li> <li> <a href="URL" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text</p></li> <li><a href="URLl" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text </p></li> <li><a href="URL" target="_blank"> <p class="test_img"><img src="url.jpg" alt="text"/></a><br> <p class="txt">text</p></li> </ul> </div> <div class="next-btn">></div> </div>
.nav-wrap { position: relative; } .scroll-nav { width: 100%; background: #555; /* メニューの背景色 */ overflow-x: auto; -webkit-overflow-scrolling: touch; /* 慣性スクロール */ } .scroll-nav ul { max-width: 1060px; /* メニューの最大幅 */ min-width: 770px; /* メニューの最小幅 */ height: 40px; line-height: 40px; margin: 0 auto; list-style: none; padding-right: 25px; /* 右側の固定分余白を空ける */ } .scroll-nav ul li { float: left; width: 20px; /* メニューの個別の幅 */ text-align: center; } .scroll-nav ul li:hover { background: #222; /* マウスホバー時の背景色 */ } .scroll-nav ul li a { display: inline-block; color: #fff; /* メニューの文字色 */ text-decoration: none; } .next-btn { /* 右側に固定する部分 */ position: absolute; top: 0; right: 0; width: 25px; /* 固定部分の幅 */ height: 40px; /* メニューの高さに合わせる */ line-height: 40px; background: #fff; color: #555; } @media only screen and (min-width: 771px) { /* PCサイズでの指定 */ .scroll-nav ul { padding: 0; } .scroll-nav ul li { width: 14.2%; /* メニューの個別の幅 */ } .next-btn { display: none; /* 右側の固定部分を非表示 */
回答1件
あなたの回答
tips
プレビュー