HTML写了一个普通的列表
<div class="buttons">
<ul class="buttonsss">
<a href="h5/msb.html">
<li class="3t">美术部</li>
</a>
<a href="h5/ysb.html">
<li class="3t">艺术部</li>
</a>
</ul>
<ul class="buttonsss">
<a href="h5/gkb.html">
<li class="3t">高考部</li>
</a>
<a href="h5/ckb.html">
<li class="3t">春考部</li>
</a>
</ul>
<ul class="buttonsss">
<a href="h5/skb.html">
<li class="3t">数控部</li>
</a>
<a href="h5/dxb.html">
<li class="3t">电信部</li>
</a>
</ul>
<ul class="buttonsss">
<a href="h5/cjb.html">
<li class="3t">财经部</li>
</a>
<a href="http://mp.weixin.qq.com/s?__biz=MzI5MDEyMzY2MA==&mid=401393371&idx=1&sn=d574701c64911532d089d54be82084a9&scene=18#wechat_redirect">
<li class="4t">专业介绍</li>
</a>
</ul>
</div>
因为最后一个按钮多一个字的原因,要修改使最后一个按钮的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
里就没问题
请问是为什么?
是的我会告诉你css明明不能以数字开头吗?
改成_3t _4t试试吧。