0

現在作成中のサイトで、トップのメニューバーがおかしくなってしまいます。
PCで見るときはいいのですが、スマホ(iPhone SE)で見ると ul タグの左側 (li タグの左側?)に空白が入ってしまいます。

どのCSSが原因なのかChromeのDevToolsでいくつかCSSを消してみたのですが、どれを消してみても空白が消えません。どうすれば消えますか?

一応HTMLとCSSのメニューバーのところだけ載せさせていただきます。
もし他の部分も必要であれば追記します。
(JavaScriptはclassを切り替えるのみなので省略します)

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>タイトル</title>
    <link rel="stylesheet" href="/../css/top.css">
    <script src="/js/top.js"></script>
  </head>
  <body>
    <ul id="menus">
      <li class="page_title">ロゴ</li>
      <li class="normal">メニュー1</li>
      <li class="normal">メニュー2</li>
      <li class="normal">メニュー3</li>
      <li class="normal">メニュー4</li>
      <li class="normal">メニュー5</li>
      <li class="normal">メニュー6</li>
    </ul>
  </body>
</html>

CSS

body {
  display: flex;
  flex-direction: column;
}
 
.page_title{
    background-color: #dda0dd;
    border-radius: 10px;
    cursor: default;
}

.normal{
    cursor: pointer;
}

#menus{
    overflow: hidden;
    background-color: #4b0082;
    width: 100%;
    height: 20%;
    text-align: center;
    color: white;
    font-size: 1.5vw;
}

#menus li{
    float: left;
    list-style: none;
    margin: auto 3px;
    width: 10%;
}

.normal:hover{
    background-color: #9370db;
    cursor: pointer;
}

@media screen and (max-width: 480px) {
        #menus{
            overflow: hidden;
            background-color: #4b0082;
            width: 100%;
            height: 50%;
            text-align: center;
            color: white;
            font-size: 5vw;
            margin: 2px auto;
        }
        
    
     #menus li{
        list-style: none;
        margin: 2px 3px;
        width: 100%;
        text-align: center;
    }
}
2
  • uil { margin: 0; padding: 0; } とか加えて見たらどうですか? Commented 2022年9月19日 0:09
  • padding:0;を追加したら中央になりました! ありがとうございました! Commented 2022年9月19日 0:48

1 件の回答 1

1

コメントいただいた通りpadding:0;をメニューバーのulに追加したら無事に中央になりました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。