问答详情
源自：3-8 表单控件(复选框和单选按钮水平排列)

不加 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>


提问者：无瑕疵 2016-06-16 11:21

个回答

  • 小小vera
    2016-06-16 14:59:01
    已采纳

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

    0
  • 慕粉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类时才是块元素（也就是才换行）

    3