どうぞよろしくお願いします。
何があってないかわかりません。
おそらくなのですが、<li>のタグをスライダー画像とメニューで使っていて使い方がわかっていなくて間違っているのかもしれませんが、直し方がわかりません。
現象
レスポンシブでスマホからみたとき2列×2列にしたい。
にもかからずなぜか一列になってしまう。floatが効かなくなっている?
PCとタブレット、スマホでの閲覧を想定しています。
HTML(問題と思われるもののみ抜粋)
<body> <div id="maincontents"> <h1>トラのページ</h1> <ul class="bxslider"> <li><img src="images/slide1.jpg" alt="トラ1" width="1000" height"500"></li> <li><img src="images/slide2.jpg" alt="トラ2" width="1000" height"500"></li> <li><img src="images/slide3.jpg" alt="トラ3" width="1000" height"500"></li> </ul> <ul id="menu"> <li>ボタン①</li> <li>ボタン②</li> <li>ボタン③</li> <li>ボタン④</li> </ul>
css(問題と思われるもののみ抜粋)
#maincontents{ width:1000px; margin:0 auto; } ul { list-style: none; padding:0; margin:0 auto; float: left; } #menu{ float: left; margin :0 auto; } ul li { float: left; padding: 20px 96px 20px 96px; margin: 10px 10px 10px 10px; background: #696969; text-align:center; } @media screen and (max-width :767px){ #maincontents{ width: 75%; margin: 0 auto; } } @media screen and (min-width :768px){ #maincontents{ max-width: 100%; margin :0 auto; } } @media screen and (max-width :767px){ #menu{ width: 75%; margin: 0 auto; } } @media screen and (min-width :768px){ #menu{ max-width: 100%; margin: 0 auto; } } @media screen and (max-width :767px){ li { width : 1%; height: 80%; } } @media screen and (min-width :768px){ li { max-width: 100%; margin: 0 auto; } } @media screen and (max-width :767px){ #subcontents{ width : 80%; margin : 0 auto; } } @media screen and (min-width :768px){ #subcontents{ max-width: 100%; margin: 0 auto; } }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/17 01:13