radio 和checkbox与文字对齐问题

最新推荐文章于 2023-04-17 10:39:05 发布

weixin_30446613

最新推荐文章于 2023-04-17 10:39:05 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wishyouhappy/p/3666244.html

本文记录了解决网页布局中不同字体大小下radio按钮与文字对齐的问题，提供了多种方法来调整对齐效果，包括设置CSS样式属性如font-size、vertical-align、margin等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在项目中遇到radio和文字对齐问题(ie不明显，火狐和google比较明显)，在此记录。

1.浏览器默认文字大小为14px，因而当文字字体为14px时radio和checkbox与文字对齐良好，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <input type="radio" value="1"> 1
    <input type="radio" value="2"> 2
    <input type="radio" value="3"> 3
    <input type="radio" value="4"> 4
    <input type="radio" value="5"> 5
    <input type="radio" value="6"> >5
　　 <br/>
    <input type="radio" value="1"> 学生
    <input type="radio" value="2"> 老师
</body>
</html>

输出结果如下：

2.更改字体大小，对齐出现问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
    font-size: 12px;
}
</style>
</head>
<body>
    <input type="radio" value="1"> 1
    <input type="radio" value="2"> 2
    <input type="radio" value="3"> 3
    <input type="radio" value="4"> 4
    <input type="radio" value="5"> 5
    <input type="radio" value="6"> >5
    <br/>
    <input type="radio" value="1"> 学生
    <input type="radio" value="2"> 老师

</body>
</html>

输出结果如下：

若字体更改为10px或者更小对齐问题更加严重（当然字体大于14px也会出现类似问题）如下为字体为10px时

3.解决方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
    font-size: 12px;
}
.inputStyle {
    vertical-align: text-bottom;
    margin-bottom: 2px;
    *margin-bottom: -2px;  //兼容IE6，IE7
}
</style>
</head>
<body>
    <input type="radio" value="1" class="inputStyle"> 1
    <input type="radio" value="2" class="inputStyle"> 2
    <input type="radio" value="3" class="inputStyle"> 3
    <input type="radio" value="4" class="inputStyle"> 4
    <input type="radio" value="5" class="inputStyle"> 5
    <input type="radio" value="6" class="inputStyle"> >5
    <br/>
    <br/>
    <input type="radio" value="1" class="inputStyle"> 学生
    <input type="radio" value="2" class="inputStyle"> 老师

</body>
</html>