将边距应用于 tailwindcss 中的模态

Question

我正在开始一个前端导师免费项目，并开始在尝试使用 tailwindcss 为菜单模式留出余量时遇到一些麻烦。

我没有使用任何框架，只是纯粹的 html、css、js vanilla 和 tailwind cli。

我已经设置了 width: 100%，它是 position: absolute，但是当我尝试应用左右边距时，只应用了左边距。

这是代码片段（我删除了 svg 代码以便更好地阅读）

HTML

<body class="h-screen w-screen">
    <header class="w-screen fixed z-10 flex justify-between pt-4 px-5">
      <div class="logo">
        <svg >
        </svg>
      </div>
      <i class="menu-icon cursor-pointer">
        <svg>
        </svg>
      </i>
      <nav
        class="
          show
          flex flex-col
          items-center
          justify-center
          w-full
          py-7
          mx-5
          bg-white
          absolute
          top-0
          left-0
          gap-4
          rounded
        "
        id="menu"
      >

我认为最好不要附上 css 代码，因为它产生顺风并且非常冗长。

但这是 screenshot 的情况

这里是 desired outcome

Answer 1

好吧，两个边距都已应用，但由于宽度设置为 100%，您的模块被推到右侧并超出视口的左边距。为了达到你想要的结果，你应该将你的导航元素包裹在 div 中，给 div 一个绝对位置和宽度：100%，并使用 px-5 作为 div 并删除导航 mx-5；这是修改后的代码：

<body class="h-screen w-screen">
    <header class="w-screen fixed z-10 flex justify-between pt-4 px-5">
      <div class="logo">
        <svg >
        </svg>
      </div>
      <i class="menu-icon cursor-pointer">
        <svg>
        </svg>
      </i>
      <div class=""show absolute top-0 left-0 w-full px-5>
        <nav
          class="
            show
            flex flex-col
            items-center
            justify-center
            w-full
            py-7
            bg-white
            gap-4
            rounded
          "
          id="menu"
        >
          <!-- nav content -->
        </nav>
      </div>

将边距应用于 tailwindcss 中的模态

apply margin to a modal in tailwindcss

html

css

tailwind-css