java 单选框 水平排列,表单控件(复选框和单选按钮水平排列)

有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑:

1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

如下所示:

游戏

摄影

旅游

男性

女性

中性

运行效果如下或查看右侧结果窗口:

f29a86503b976ef0632cecd61cef808b.png

实现源码请查看bootstrap.css文件第1767行~第1780行:

.radio-inline,

.checkbox-inline {

display: inline-block;

padding-left: 20px;

margin-bottom: 0;

font-weight: normal;

vertical-align: middle;

cursor: pointer;

}

.radio-inline + .radio-inline,

.checkbox-inline + .checkbox-inline {

margin-top: 0;

margin-left: 10px;

}

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页