キャプチャが見づらく恐縮ですが、
white-space: nowrap;でカードを並べて、横スクロールでカードを見ていくような、よくあるパーツです。
Chrome最新版のスマホプレビューで見ているのですが、
右のカードの上部に空きができています。
おそらく要素がすべて下寄せになっているのかなと思っているのですが
なぜ下寄せになってしまうのか理解できません、、以下ソースです。
HTML
1<ul class="wideList"> 2 <li><router-link to="/"><img src="@/assets/sample.jpg"><span>テキストテキストテキストテキストテキストテキストテキストテキスト</span></router-link></li> 3 <li><router-link to="/"><img src="@/assets/sample.jpg"><span>テキストテキストテキストテキストテキストテキスト</span></router-link></li> 4</ul>
CSS
1 .wideList { 2 overflow-x: auto; 3 white-space: nowrap; 4 -webkit-overflow-scrolling: touch; 5 margin-top:-10px;//これがないとshadowがなぜか消える… 6 } 7 .wideList li{ 8 position:relative; 9 white-space: normal; 10 display: inline-block; 11 margin:10px 20px 10px 0px; 12 width:61.8%; 13 background-color:#fff; 14 border-radius: 5px; 15 box-shadow: 0 0 10px rgba(173,189,196,0.2); 16 padding:20px; 17 } 18 .wideList li:first-child{ 19 margin-left: 20px; 20 } 21 .wideList a:after{ 22 position:absolute; 23 top:0; 24 right:0; 25 bottom:0; 26 left:0; 27 z-index:1; 28 pointer-events:auto; 29 content:""; 30 background-color:rgba(0,0,0,0); 31 } 32 .wideList li img{ 33 width:100%; 34 display: block; 35 margin-bottom:15px; 36 } 37 .wideList li span{ 38 width:100%; 39 display: block; 40 }
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
回答2件
あなたの回答
tips
プレビュー