jquery - 动态设置后选择器的宽度
问题描述
我正在使用 CSS 创建一个类似功能的简单选项卡。
当一个选项卡处于活动状态时,我使用选项卡 - 拼写式tabs设置选定选项卡的CSS:selector之后。但是其中一个 Tab 标题文本比另一个长,因此图像如下所示:
如何动态设置宽度,使其看起来像这样:
.tab-slider--tabs {
display: block;
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
border-radius: 35px;
overflow: hidden;
background: #fff;
height: 35px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tab-slider--tabs:after {
content: "";
width: 50%;
background: #345F90;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 250ms ease-in-out;
border-radius: 35px;
}
.tab-slider--tabs.slide:after {
left: 50%;
}
这是:演示代码
更新:我可以使用 .tab-slider--trigger{ width:30%; 暂时解决这个问题。显示:表格单元格;...} 但我仍在寻找正确的方法来做到这一点。
解决方案
尝试这个:
.tab-slider--trigger {
width:150px;
font-size: 12px;
line-height: 1;
font-weight: bold;
color: #345F90;
text-transform: uppercase;
text-align: center;
padding: 11px 20px;
position: relative;
z-index: 2;
cursor: pointer;
display: inline-block;
transition: color 250ms ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
推荐阅读
- java - 使用 WMIC 优雅地杀死 Java 进程
- php - 多查询完全执行后如何执行单查询?
- swift - 数组中具有关联类型的协议 - 替代解决方案
- amazon-web-services - 使用假设规则在 3 个 AWS 账户之间进行跨账户访问
- html - 如何将图像放在引导程序 4 中的可折叠部分之外?
- php - Jquery Ajax PHP无法获取上传的文件名
- centos - 想在容器中运行 exportfs,需要挂载到容器中吗?
- matlab - Kmeans 绘制的质心过多
- javascript - 如何检查条件并将额外参数传递给语义 ui 搜索?
- jboss - 如何配置 Camel context.xml 以在 Camel 路由上的 java bean 中执行一些具有多参数的方法?