不加 radio-inline也可以水平啊
无瑕疵
2016-06-16 11:21
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单控件(复选框和单选按钮水平排列)</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="sex">男人
</label>
<label class="radio-inline">
<input type="radio" name="sex">女人
</label>
<label class="radio-inline">
<input type="radio" name="sex">中性
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" >男人
</label>
<label>
<input type="checkbox" >女人
</label>
<label>
<input type="checkbox" >中性
</label>
</div>
</form>
</body>
</html>
2回答
-
- 小小vera
- 2016-06-16 14:59:01
你没有给label添加class="checkbox" 这样把label默认为类联元素 所以能够水平显示 但是这样不规范
-
- 慕粉3294123
- 2016-07-05 10:39:01
楼上回答的很正确，我来仔细分析一下，首先看源代码
.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}然后再看看.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}也就是说默认是内联元素，只有加上.radio,
.checkbox类时才是块元素（也就是才换行）
玩转Bootstrap（基础）
314544 学习 · 2275 问题
相似问题