position指定におけるズレ

Question

セレクトボックスを作る中で、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;
}

Comments

[s8_chu]

URLを見たのですが、右にずれているという状態が再現できませんでした。キャッシュの消去( http://portal.tac-school.co.jp/faq_system/?id=38 )を行ってからもう一度確認してみていただけませんか？

[revoiot]

言葉足らずで大変申し訳ございません。ずれているのは、スマホ時です。さきほど、websiteをサーバにアップロードしなおしました。大変恐縮ではございますが、もう一度見ていただけると幸いです。

Answer 1

・私が今回書いたコードでは、absoluteはscene3内でのでの絶対配置になっているのでしょうか？

絶対配置になっています

---

・どうすれば、右にずれたブロック要素を真ん中に戻すことができるでしょうか？

.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;
}

margin-right: auto;のまえに何か入っているようで効いていません。
試しに改行を取ってmargin-left: auto;margin-right: auto;としてみてください。

---

すこしアドバイス

ブラウザの「開発者ツール」や「Developer tools」などはご存知でしょうか。
問題の箇所を「Developer tools」で確認するとこのような形で見ることでできます。

右側中央のCSSのmargin-right: auto;のところに「！」マークが付いており、
打ち消し線で表示されています。これはmargin-right: auto;が効いていないということを表しています。

この画面上では問題ない記述に見えますが、すこし右上の「box-sp.css:205」を押すと当該のCSSファイルをみることができ、margin-right: auto;のインデントがずれており、その部分を消してみたところ症状が改善されました。

このように「開発者ツール」や「Developer tools」などはCSSでのレイアウト時に、大きな助けになります。
ぜひ調べてみて使ってみてください。

Comments

[revoiot]

大変丁寧で、詳しいご回答いただきありがとうございます。回答のわかりやすさに感動いたしました。

おかげ様で、無事配置を修正することが出来ました。

次回からは、教わったdeveloperツールの知識を活かして、website製作に励んでいきたいと思います。ありがとうございます。

Answer 2

scene2,
scene3 {
  margin: 0 auto;
}

あと、ulの直下にli無しでdivが入っているのも気になります。

Comments

[revoiot]

ご回答いただきありがとうございます。

コードの訂正をさせていただきました。