Tailwind CSS：精心设计导航设计-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

Tailwind CSS：精心设计导航设计

P粉515066518 2024-02-26 16:48:59

[Vue.js讨论组]

711

我是 CSS 和 VueJs 新手，所以我正在创建选项卡面板设计 + 功能

目前，我正在使用 tailwind CSS 插件

我想要的设计是这样的：

当前：CodePen

我无法复制这个愿望，因为我错过了：

元素之间的空格：我尝试使用 flex space-x-10 或 grid grid-gap-20 但它不起作用
背景为灰色：我在 <nav> 内使用 bg-gray-600 进行尝试，但是原因而非结果
点击时更改所选标签

P粉515066518

全部回复(1)

P粉7647859242024-02-27 11:39:53 1楼

你可以做的是直接在CSS中更改你的导航，使用：

nav {
    width: max-content; /*This gonna set a fixed width, it is necessary*/
    display: flex;
    gap: 20px; /*increase as much you want to stay like your template, it is the space between the elements in your flex*/
    background: #ccc; /*Just put your color directly*/
    border-radius: 20px; /*Just put your radius*/;
}