html - 无法居中绝对位置 (Tailwind.css)-6ren

html - 无法居中绝对位置 (Tailwind.css)

转载作者：行者123 更新时间：2023-12-03 15:27:45

27

4

背景与问题:

我正在使用 Tailwind CSS 和 Alpine.js 来创建一个简单的搜索栏，该搜索栏的下拉菜单使用 absolute
此处编码:https://codepen.io/jdonline/pen/YzXpbyJ

当我使用 relative 定位下拉列表时，它的位置完全符合我的要求(但会拉伸(stretch)我不想要的页面的其余部分)。但是，当我将其更改为 absolute ，虽然它不再拉伸(stretch)页面，但它比预期更宽地扩展了下拉菜单。

示例:

您可以通过单击搜索栏右侧的下拉箭头来查看此内容。更改 absolute 时也可以看到区别至relative在 26号线

问题:

我如何使用 Tailwind.css 定位下拉列表，使其具有 absolute位置，但不会比搜索栏更宽？

最佳答案

仅顺风，您可以使用以下类

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

所以，就像

<div class="relative">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div>
<div>

关于html - 无法居中绝对位置 (Tailwind.css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60362442/

27

4

0

文章推荐： flutter - 如何验证 flutter 中的单个表单字段

文章推荐： flutter-moor - 如何使用一对多连接创建 Flutter Moor 关系

文章推荐： c# - 然后在 Entity Framework 核心中包含显式加载？

tailwind-css - Tailwind CSS : how to use color variables in tailwind. config.js
我想将颜色变量(默认或扩展)用于我的扩展主题，例如: module.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,t
tailwind-css - Tailwind grid_template_columns
我们如何在 Tailwind 中设置单个列的宽度？例如在 Vanilla CSS 我会 .grid-container { display: grid; grid-template-colu
tailwind-css - Tailwind CSS - 类不存在错误
我是 Tailwind CSS 的新手。我在构建 React 项目时遇到了这个错误: The hover: class does not exist. If hover: is a custom cl
tailwind-css - 为什么 tailwind 中没有多少百分比单位？
为什么 tailwind 中没有太多的百分比单位，例如我想要 50% 的宽度。我知道我可以向它添加自定义配置，但我只是想知道是否有任何特定原因。最佳答案我会说这更像是一种个人偏好的编码风格。使用后
tailwind-css - 当位置设置为粘性时，Tailwind 右属性不起作用
我正在尝试将项目对齐到屏幕右侧并使其粘滞。但正如你在这个 sandbox 中看到的那样它不起作用。未应用正确的属性。我该怎么办？最佳答案这也行 hossein 关于tailwind-
tailwind-css - Tailwind CSS 中的动态颜色
是否可以在 tailwind 配置中使颜色动态化。我想从后端通过 api 接收所需的(primary，accent)颜色。因此用户可以从管理面板更改颜色。我想从 api 获取这个十六进制值最佳
tailwind-css - Tailwind css 暗模式未启用
我正在尝试使用顺风基于系统默认值启用暗模式。为此，我使用了插件: Tailwind dark mode 。我的顺风配置失败如下: defaultTheme = require('tailwindc
tailwind-css - 如何使用 Tailwind CSS 定位具有特定数据属性的元素？
我有几个消息框，每个框都有一个数据作者属性。如果我想在 CSS 中对这些消息框应用样式，我可以这样做: [data-author="Ben"] { background-color: blue;
tailwind-css - 为什么 tailwind css 没有效果？
没有错误，但 Tailwind 没有应用任何样式: 包.json "dependencies": { "tailwindcss": "npm:@tailwindcss/postcss7-com
tailwind-css - 在 Tailwind CSS 中组合两个过渡属性
我想要transition-transform 和transition-shadow，既不是transition-all 也不是只有一个。把这两个不影响，我找不到它的文档，我尝试像这样玩:transi
tailwind-css - Webpack + postcss 不清除 Tailwind
我正在尝试使用 webpack 5 和 tailwind 2。日志表明大多数事情都设置正确，但没有进行清除。我跑 NODE_ENV=production webpack --config webpa
tailwind-css - 自定义 Tailwind CSS 时引用默认颜色
我正在尝试 extend使用他们的 tailwind.config.js 的 tailwind css 调色板文件。我的目标是创建一组主要和次要颜色，我可以在设计我的网站时使用它们。我想通过从默认的顺
tailwind-css - 如何处理 Tailwind & PurgeCSS 和很多不同的文件夹？
我一直在使用带有“清除”选项的 Tailwind 来使最终的 css 文件更小且成功。但是，我一直想知道我的方法的效率。我正在处理有很多子文件夹的项目，我都指定如下: purge: {
tailwind-css - 你如何在 Tailwind css 中设置整页背景颜色？
你如何在 Tailwind 中设置整页背景？我可以看到使用的唯一属性是 h-screen ，但是当我调整浏览器大小时这不起作用。这是我的代码: 完整的 html 示例:
tailwind-css - 如何确定 Tailwind Css 的范围
将顺风 CSS 包含在我不希望它全局应用的系统中时，我找不到一个很好的方法来确定适用于自定义构建选项的范围。基本上我想这样做: .tailwind{ @import "tailwindcss
tailwind-css - 将 tailwind CSS 与多个相似元素一起使用的最佳做法是什么？
我正在学习 Tailwind CSS。据我了解，如果您想设置元素的样式，请向其添加 Tailwind 实用程序 css 类。想给多个相似元素设置样式怎么办？例如，我有以下 HTML 片段:
tailwind-css - 将 tailwind CSS 与多个相似元素一起使用的最佳做法是什么？
我正在学习 Tailwind CSS。据我了解，如果您想设置元素的样式，请向其添加 Tailwind 实用程序 css 类。想给多个相似元素设置样式怎么办？例如，我有以下 HTML 片段:
tailwind-css - 在 Tailwind 中将所有带有屏幕变体的 margin 值列入安全列表
我需要将所有具有相应响应尺寸的边距值列入白名单。例子: 'mb-10' 'md:mb-10' 'xl:mb-10' 等等。这是我现在在我的 tailwind.config.js 中的内容，但它似乎
tailwind-css - 如何在 Quasar 框架中使用 Tailwind CSS？
我一直在尝试使用 Tailwind 来自定义 Quasar 组件，但 Quasar CSS 已经覆盖了大部分 Tailwind CSS。我在我的 tailwind.config.js 中添加了一个前
tailwind-css - Tailwind css 固定宽度不适用于 flex 中的其他元素
我必须并排放置两列。这些列之一具有固定宽度。我真的很想理解为什么一列中的固定宽度在 Tailwind CSS flexbox 上不起作用。我有以下代码: This title pushed

首页

博学

6Ren·AI

商城

html - 无法居中绝对位置 (Tailwind.css)