针对bootstrap内联单选框input与文字不能居中对齐的解决办法

2024年6月5日 261次阅读 来源: weixin_30920853

1.html代码

<div >
      <label class="checkbox-inline first-label">
             <input type="radio" name="getOption" id="option1" value="option1" checked>张三
       </label>
       <label class="checkbox-inline">
             <input type="radio" name="getOption" id="option2" value="option2"> 李四
       </label>
       <label class="checkbox-inline">
             <input type="radio" name="getOption" id="option3" value="option3"> 王五
       </label>
</div>

2.css代码

.checkbox-inline{
   
　　　　　　　　　　padding:0;
　　　　　　　　　　margin:0 15px 0 0;
　　　　　　　　　　line-height: 20px;
　　　　　　　　　　min-height: 20px;
}
input[type='checkbox'], input[type='radio'] {
   
　　　　　　　　　　margin: -2px 5px 0 0;
　　　　　　　　　　line-height: 20px;
}

3.css内的只可根据需要相应调整，本文针对label行高20px举例。

转载于:https://www.cnblogs.com/luoyishamai/p/5316033.html

    原文作者：weixin_30920853
    原文地址: https://blog.csdn.net/weixin_30920853/article/details/96663870
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞