我正在制作菜单选择栏,当我鼠标移动时,我遇到了问题.图标的角落都应该是弯曲的,但只有左侧的角落.
这是代码的演示： https://jsfiddle.net/gfqgcwq5/
这是代码的演示： https://jsfiddle.net/gfqgcwq5/
据我所知,似乎内联块是罪魁祸首：
.wrapper{
display:inline-block;
margin:10px;
}
我只是不知道如何在没有它的情况下完成内联数组.我不擅长css,所以如果有人能借我的话,我会很感激.
解决方法
试试这个：
.icon{
border-radius:8px;
padding-top:15px;
padding-bottom:5px;
transition:.1s;
font-size:60px;
display: inline-table;
}
.icon:hover{
cursor:pointer;
background-color: #00B1EB;
color:#fff;
}
span#picture > span {
padding-right:9px;
padding-left:10px;
padding-top:7px;
padding-bottom:10px;
}
.text{
text-align:center;
}
.wrapper{
display:inline-block;margin:10px;
}
