如何创建居中的响应式菜单

Question

我在创建一个有 4 个项目的菜单时遇到了一些麻烦，它们应该彼此居中并在它们之间留有间隙，如果在移动设备上则应该相互堆叠。菜单应该看起来像这里的图像...

谁能告诉我这是如何实现的？

Answer 1

这是用菜单按钮构建容器。当然你需要自己设计这些样式：

<div class="navContainer">
  <input type="button" value="Menu1"/>
  <input type="button" value="Menu2"/>
  <input type="button" value="Menu3"/>
  <input type="button" value="Menu4"/>
</div>

这是为了证明它的位置和保证金。它还包括一个媒体查询，它将使输入堆栈低于 500px

<style>
  .navContainer {
    display: flex;
    justify-content: center;
  }
  .navContainer input {
    margin-left: 30px;
  }

  @media only screen and (max-width:500px){
    .navContainer {
      flex-direction: column;
    }
  }
</style>

Answer 2

可以这样做，只需要一个 ul 列表和几行 CSS:

<!DOCTYPE HTML>

<html>

    <head>
        <style>

            * {
                margin: 0;
                padding: 0;
            }
            .menu {
                list-style-type: none;
                width: 100%;
                text-align: center;
            }
            .menu li {
                text-align: center;
                display: inline-block;
                padding: 8px 16px;
                margin: 8px 8px;
                background-color: rgba(0, 0, 255, 0.336)
            }

            @media only screen and (max-width: 600px) {
            
                .menu li {
                    display: block;
                }

            }

        </style>
    </head>

    <body>
        
        <ul class="menu">
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
        </ul>

    </body>

</html>

如何创建居中的响应式菜单

How can I create a centered responsive menu

css