セレクトボックスを作る中で、positionの事で再度つまづいてしまったため、再度質問させていただきます。
下記の画像見ていただく通り、スマホ時のシーン別Searchのブロック要素と価格帯Searchのブロック要素が右にずれてしまっています。
私はこの状況を改善するため、このサイトをみて、参考にしました。
まず、私は下記にある画像をみて分かる通り、画像の上にセレクトボックスをpositionで配置しました。
子要素であるkind2とkind3に、absoluteを指定し、それから上記のサイトから、親要素のscene3にrelativeを指定しました。これでabsoluteはブロック要素ないでの絶対配置になったと思ったのですが、なぜか、scene3にtext-align:center;やmargin:0 auto;などしてしても変化がありません。
質問
・私が今回書いたコードでは、absoluteはscene3内でのでの絶対配置になっているのでしょうか?
・どうすれば、右にずれたブロック要素を真ん中に戻すことができるでしょうか?
この問題がわかる方、大変恐縮ですが、ご教授頂けないでしょうか?
よろしくお願いします。
念の為に、websiteのURLを記載させていただきます。よろしくお願いします。
URL
HTML
<ul class="boxsidebar-right"> <div class="scene"> <div class="scene2"><a href="#"><img src="box img/box sidebar/search-scene.gif" alt=""></a> <select class="kind" name="kind"> <option value="reservation">パーティの予約について</option> <option value="contact">一般的な問い合わせ</option> </select> </div> <div class="scene3"><a href="#"><img src="box img/box sidebar/search.gif" alt=""></a> <select class="kind2" name="kind"> <option value="reservation">パーティ</option> <option value="contact">一般的</option> </select> <select class="kind3" name="kind"> <option value="reservation">パーティ</option> <option value="contact">一般的</option> </select> </div> </div> </ul>
CSS
.scene2{ position:relative; width:213px; height:123px; margin-left: auto; margin-right: auto; display: block; } .scene3{ position:relative; width:216px; height:133px; margin-left: auto; margin-right: auto; display: block; } .scene3 .kind2{ position:absolute; left:7%; top:41%; z-index:100; } .scene3 .kind3{ position:absolute; left:57%; top:41%; z-index:100; } .kind{ position:absolute; left:13%; top:43%; z-index:100; }
回答2件
あなたの回答
tips
プレビュー