为了账号安全,请及时绑定邮箱和手机立即绑定

不加 radio-inline也可以水平啊

<!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 回答

你没有给label添加class="checkbox" 这样把label默认为类联元素 所以能够水平显示 但是这样不规范

0 回复 有任何疑惑可以回复我~
#1

无瑕疵 提问者

非常感谢!
2016-08-19 回复 有任何疑惑可以回复我~

楼上回答的很正确,我来仔细分析一下,首先看源代码

.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类时才是块元素(也就是才换行)

3 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

不加 radio-inline也可以水平啊

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信