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里就没问题
请问是为什么?