用label,例如:
.add_cart_radio{float:left
margin-top:0.5em
margin-right:0.5em
}
.add_cart_radio input[type="radio"]{
display:none
}
.add_cart_radio input[type="radio"] + label{
padding:0.2em 1em
border:1px solid #CCCCCC
border-radius:0.5em
color:#999
}
.add_cart_radio input[type="radio"]:checked + label{
padding:0.2em 1em
border:1px solid #FF6600
border-radius:0.5em
background:#FF6600
color:#FFFFFF
}
首先推荐你用火狐的firebug或者chrome自带的管理员工具看判断你这个按钮点击区域为什么是歪的。其次,感觉你这里的元素都text-align:center了。所以建议在学生和管理员外面的div(如果没有就加个)上加个text-align:left试试。最后,为了更好的体验,点击学生也能选中radio,radio上加个id名例如id="radio_1",那么学生就应该用label包住,并且label加个属性for="radio_1"。这样才是最好的体验。建议多百度w3c文档看看写个.radio{float:left
margin:0px
padding:0px…}//先写好打算控制的样式
在下面用到的时候就
<input
type="radio"
class="radio"
/>