25
4
I have three items in two rows like:
我有两行的三个项目，例如：
个人中心
文章发布
退出<div class="grid grid-cols-12">
<div class="col-span-12 border-b-4 border-black">Item1</div>
<div class="col-span-2 border-r-4 border-black">Item2</div>
<div class="col-span-10">Item3</div>
</div>
I need to reduce the default width of Item2 using w-14 and I need to justify Item3 to the left. I am using tailwind CSS v3.3.3.
我需要使用w-14减小Item2的默认宽度，并且需要将Item3向左对齐。我使用的是顺风CSS3.3.3版。
After adding w-14 to Item2 I tried various justifying options like justify-stretch, justify-items-stretch, justify-items-start, justify-self-auto, etc. to Item3, but none of those options helped justifying Item3 to the left (immediately adjacent to Item2). Item3 seem to stay put in its position.
在将w-14添加到Item2后，我尝试了各种对齐选项，如对齐-拉伸、对齐-项目-拉伸、对齐-项目-开始、对齐-自动等，但这些选项都不能帮助对齐Item3向左(紧挨着Item2)。项目3似乎保持在自己的位置上。
Here is what I tried:
以下是我尝试的：
<div class="grid grid-cols-12 justify-items-stretch">
<div class="col-span-12 border-b-4 border-black">Item1</div>
<div class="col-span-2 border-r-4 border-black w-14 justify-self-start">Item2</div>
<div class="col-span-10">Item3</div>
</div>
which reduces the width of Item2 but does not left justify Item3.
这会减小Item2的宽度，但不会使Item3对齐。
Any hints on this would be much appreciated.
任何关于这方面的提示将不胜感激。
w-6/12 applies width: 50% and this 50% would be 50% of its column span, 2. The element would still occupy two columns but would only take up the width of one, hence it this one-column gap makes it look like the third item is not up against the second item.
W-6/12适用宽度：50%，这50%将是其列跨度的50%，2。元素仍将占据两列，但仅占据一列的宽度，因此，这种一列间隙使其看起来像是第三项与第二项不在一起。
To work around this, consider changing the second item to only occupy one grid column instead without the width and justify-self property values, thus giving the same visual effect. However, the second item will only occupy one grid column track, thus allowing the third item to be visually closer.
要解决此问题，请考虑将第二项更改为只占用一个网格列，而不使用宽度和自对齐属性值，从而获得相同的视觉效果。但是，第二个项目将仅占用一个轴网柱轨道，从而使第三个项目在视觉上更接近。
<script src="https://cdn.tailwindcss.com/3.3.3"></script>
<div class="grid grid-cols-12 justify-items-stretch">
<div class="col-span-12 border-b-4 border-black">Item1</div>
<div class="col-span-1 border-r-4 border-black">Item2</div>
<div class="col-span-10">Item3</div>
</div>
Consider adjusting the column widths of the grid layout so that the second item's column size is what you'd want. This will mean that the third grid track where the third element starts from, will be at the end of the second item. This will mean the third element starts after the second item:
考虑调整网格布局的列宽，以便第二个项目的列大小符合您的要求。这意味着第三个元素开始的第三个栅格轨迹将位于第二个项目的末尾。这将意味着第三个元素在第二个项目之后开始：
<script src="https://cdn.tailwindcss.com/3.3.3"></script>
<div class="grid grid-cols-[repeat(2,calc(theme(spacing.14)/2))_repeat(10,1fr)] justify-items-stretch">
<div class="col-span-12 border-b-4 border-black">Item1</div>
<div class="col-span-2 border-r-4 border-black">Item2</div>
<div class="col-span-10">Item3</div>
</div>
Thanks @Wongjn, I have edited my post to update w-6/12 to w-14. Your code does not reduce the width of Item2. After applying w-14 to Item2 to reduce the width, I need to left justify Item3.
谢谢@Wongjn，我已经编辑了我的帖子，将w-6/12更新为w-14。您的代码不会减小Item 2的宽度。在将w-14应用于Item 2以减小宽度之后，我需要左对齐Item 3。
I have added a solution to your changed question.
我已经为您更改的问题添加了解决方案。
Thanks @Wongjn, that is exactly what I am looking for! I have marked this as the accepted answer.
谢谢@Wongjn，这正是我正在寻找的！我已将此标记为可接受的答案。
25
4
0
阅读目录 。 原子化 CSS 框架 tailwindcss 介绍 样式智能提示插件 小结 回到目录 原子化 CSS 框架
我正在使用 NextJS 和 Tailwind CSS 来设计顶部导航栏。我希望更改事件链接的文本颜色。下面是我的代码: const Header = () => { return(
我想让字体大小响应，但它不适用于 font-awesome。 如何让 xl:fa-3x 在 tailwindcss 上运行？ 谢谢 最佳答案 这是我的解决方案，您需要使用 tailwindcss r
我正在尝试重新创建一个从 vanilla CSS 到 tailwindcss 的元素。但是我尝试了很多选择，但都失败了。 这是 CSS 代码: header { background: lin
我在成功的身份验证中加载页面时会出现一条 flash 消息，我正在尝试弄清楚如何将它水平居中放置在任何设备上。我正在使用 TailwindCSS 来调整 div 的位置并尝试过 fixed和 abso
有没有办法为高度属性设置动画，这是我的简单代码，但高度不是动画它只是立即改变 { setSecond(!secondElement) }}> TITLE 1 2 最佳
我正在尝试创建一个 Fixed Navigation Bar在 Tailwind CSS和粘性滚动主页，但无论我尝试什么，我都无法让它工作...... 这是我取得的成就: 这是我的代码:
我有一个使用 Rails 5、Ruby 2.4 构建的网络应用程序。我使用 Tailwindcss 作为我的设计框架。 我有一张主图(下图)，我在其中使用类似警报的顺风作为横幅来为新的网上商店做商品广
我正在使用 TailwindCSS - 实用程序类框架 - 为我的元素设置样式。尽管这更像是一个通用的 CSS 问题。 我无法定位盒子，所以它可以在不溢出的情况下获得剩余空间。这是我的真实状态:
所以我正在使用 Rails、Vue 和 TailwindCss 1.0+ 制作应用 目前我正在尝试为我的产品制作一个下拉菜单，但是当我点击下拉按钮时，包含我的元素的下拉菜单飞到了屏幕的边缘，而它应该在
所以我想知道如何在 TailWindCSS Config 中设置最大高度媒体断点。iPad Pro 因其宽度而被识别为笔记本电脑。也就是说，它们对于 Laptop CSS 来说太高了，让我的网站看起来
在 TailwindCSS 中，您可以指定这样的代码: 因此默认颜色为红色，在“sm”断点处为绿色，在“md”断点处为蓝色。 您可以将任何实用程序类分配给任何断点，方法是在断点前加上对应的字母和“:
在前端开发的世界中，随着项目的复杂性增加，如何高效管理样式，快速开发出响应式、美观的界面成为每个开发者关心的问题。Tailwind CSS 作为一个革命性的实用类（utility-first）CSS
我将 Vue3 与 TailwindCSS 结合使用，并希望创建一个带有动态 grid-cols-{n} 类的网格。我知道 TailwindCSS 默认最多支持 12 列，但我无法自定义主题，因为列数
我想知道是否有办法在设定时间后停止 tailwindcss 中的动画 10 秒后停止弹跳 我什么都试过了，还是找不到办法 Hello 我已经尝试了 duration-75 但动画不会停止 最佳
我正在尝试将 Tailwind 与 React 结合使用来显示背景图像。我的配置如下: const white_bg = require("../../assets/images/wave_light
我有一个 website使用 TailwindCSS 正确实现深色/浅色 UI。 我想知道是否有一种方法可以强制网站以暗模式加载，直到用户通过单击切换按钮专门打开亮模式。 为什么？因为我更喜欢网站在深
这就是我的问题的样子(见环): View Image 使用Chrome的inspector发现与--tw-ring-shadow有关。所以我尝试添加像 ring-0 和 ring-offset-0 这
我们有一个使用 TailwindCSS 的组件库 (VueJS)，我们将把它作为私有(private) npm 包发布。我的问题是 我们如何在组件库中公开 tailwind.config.js，以便使
我想知道如何为特定的 xl 屏幕尺寸从现有的 div 中删除背景颜色？我想要这样的东西 background-color:unset，这可以用 tailwind.css 实现吗？ 最佳答案 您可以
我是一名优秀的程序员,十分优秀！