Html Tailwindcss下拉项飞到屏幕边缘,而不是在下拉按钮下
因此,我正在用Rails、Vue和TailwindCss 1.0制作一个应用程序+ 目前,我正在尝试为我的产品制作一个下拉菜单,但当我点击下拉按钮时,包含我的项目的下拉菜单会飞到屏幕边缘,而它应该在我的按钮下 我不太确定我错在哪里 问题所在: 以下是下拉菜单的外观:Html Tailwindcss下拉项飞到屏幕边缘,而不是在下拉按钮下,html,css,vue.js,tailwind-css,Html,Css,Vue.js,Tailwind Css,因此,我正在用Rails、Vue和TailwindCss 1.0制作一个应用程序+ 目前,我正在尝试为我的产品制作一个下拉菜单,但当我点击下拉按钮时,包含我的项目的下拉菜单会飞到屏幕边缘,而它应该在我的按钮下 我不太确定我错在哪里 问题所在: 以下是下拉菜单的外观: <!-- Start LG Products Dropdown --> <div class="hidden lg:inline-block"> <button @click="prodO
<!-- Start LG Products Dropdown -->
<div class="hidden lg:inline-block">
<button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600">
<i class="fal fa-sitemap"></i><span class="ml-1">Products</span>
</button>
<button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"></button>
</div>
<div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
<slot name="dropdown-items"></slot>
</div>
<!-- End LG Products Dropdown -->
产品
这是整个导航组件的代码:
<template>
<nav class="flex items-center justify-between flex-wrap bg-white p-6 w-full fixed">
<a href="https://loadze.com">
<h1>
<div class="flex items-center flex-shrink-0 text-blue-600 mr-6 logoFont">
<span class="font-bold text-3xl tracking-tight"><i class="far fa-truck-loading text-2xl"></i>LOADZE</span>
</div>
</h1>
</a>
<div class="block lg:hidden">
<button @click="navOpen = !navOpen" class="flex items-center px-3 py-2 border rounded text-blue-600 border-blue-600 hover:text-green-600 hover:border-green-600 focus:outline-none">
<svg v-if="!navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg>
<svg v-if="navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>
</button>
</div>
<div :class="navOpen ? 'block' : 'hidden'" class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<slot name="nav-left"></slot>
<!-- Start LG Products Dropdown -->
<div class="hidden lg:inline-block">
<button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600">
<i class="fal fa-sitemap"></i><span class="ml-1">Products</span>
</button>
<button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"></button>
</div>
<div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
<slot name="dropdown-items"></slot>
</div>
<!-- End LG Products Dropdown -->
</div>
<div>
<slot name="nav-right"></slot>
</div>
</div>
</nav>
</template>
<script>
export default {
data () {
return {
navOpen: false,
prodOpen: false
}
}
}
</script>
产品
导出默认值{
数据(){
返回{
navOpen:错,
prodOpen:错误
}
}
}
我不完全理解您的问题。但是如果我看到截图,我想这就是你所说的对齐方式。基于这一结论
如果是这种情况,您必须更改以下内容:left-0
为right-0
<div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
<slot name="dropdown-items"></slot>
</div>
致:
这将使div从右到左对齐,如果它扩展/需要更多空间,它将扩展到屏幕中间。可能是您的相对类只提供给按钮,似乎不起作用。尝试将其包装在一个div中,并将相对类赋予该div。下面是一个示例,Adam有关于“构建下拉菜单”的视频教程系列@Saleem,代码来自该课程……。您可以将
相对类添加到div的父类中(在其中选中v-if=“prodOpen”
)
<div v-if="prodOpen" class="absolute right-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
<slot name="dropdown-items"></slot>
</div>