问答详情
源自：3-7 表单控件(复选框checkbox和单选择按钮radio)

请问为什么radion和checkbox的inline总是对不齐呢？

<!doctype html>
<html>
<head>
    <meta 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">
  <h3>案例1</h3>
  <div class="checkbox checkbox-inline">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="checkbox checkbox-inline">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="checkbox checkbox-inline">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <br>
  <div class="radio radio-inline">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" >
      喜欢
    </label>
  </div>
    <div class="radio radio-inline">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
  </div>
<div class="radio radio-inline">
    <label>
      <input type="radio" name="optionsRadios" id="optdionsRadios2" value="hate">
      不喜欢
    </label>
  </div>
  
</form>     
</body>
</html>

老师：为什么显示出来时第一个和后面的对不齐呢？如图：

5493d7c50001c18904030176.jpg

提问者：Domaple 2014-12-19 15:46

个回答

  • weibo_城固如春lu_03877266
    2017-05-12 17:14:50

    测试。。。

    0
  • qq_独步沧海_0
    2016-03-24 16:14:06

    .checkbox-inline{padding:0;margin:0 15px 0 0; line-height: 20px;min-height: 20px;}

    input[type='checkbox'], input[type='radio'] {margin: -2px 5px 0 0;line-height: 20px;}

    具体值根据需要调节


    0
  • Domaple
    2014-12-19 15:52:41

    好吧，我再看一下节就找到答案了，居然是不要前面那个radio或者checkbox的class就可以了的。

    0