html 修改li标签样式,为li标签添加class并修改CSS样式,为什么会无效?

博客作者遇到了一个问题,即在HTML列表中,由于最后一个按钮的文本比其他按钮多一个字,导致需要为它单独设置内边距。作者采取的解决方案是为3个字符和4个字符的按钮分别定义不同的CSS类`.3t`和`.4t`来调整padding。然而,这个方法似乎并未生效。问题可能在于CSS选择器的优先级或者样式覆盖。尽管如此,作者寻求是否有更优雅的解决方案。
摘要由CSDN通过智能技术生成

HTML写了一个普通的列表

美术部

艺术部

高考部

春考部

数控部

电信部

财经部

专业介绍

因为最后一个按钮多一个字的原因,要修改使最后一个按钮的padding有别于其他的padding,我的解决方法是给他们分别添加不同的class(请问有什么其他更好的解决方法吗?),3字的是.3t,4字的是.4t。

.major {

padding-top: 30px;

}

.buttons {

height: 350px;

padding-top: 20px;

/*display: flex;

flex-direction: column;

align-items: center;

justify-content: center;*/

}

.buttonsss {

/*display: flex;

flex-direction: row;

align-items: center;

justify-content: center;*/

margin-left: auto;

margin-right: auto;

}

.buttonsss li {

background-color: transparent;

border: 1px #939393 solid;

border-radius: 4px;

font-size: 20px;

color: #939393;

width: 150px;

height: 146px;

line-height: 40px;

text-align: center;

list-style-type: none;

text-decoration: none;

cursor: pointer;

margin-right: 30px;

display: inline;

}

.buttonsss a:link {

text-decoration: none;

border-bottom-width: 0;

}

.buttonsss li:hover {

color: #a8d970;

cursor: pointer;

border: 1px #a8d970 solid;

}

.container p {

padding-bottom: 70px;

}

.4t {

padding: 10px 10px;

}

.3t {

padding: 10px 20px;

}

但是....无效...没有padding效果

如果padding写在.buttonsss li里就没问题

请问是为什么?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值