为什么我的内联工作不正常？

Question

以下是HTML代码，但display:inline无效。我无法理解为什么。但display:flex，display: -webkit-box;，display: -webkit-inline-box;，display: inline-flex;工作正常;

当我在班级位置上使用display:inline时

当我在课程位置使用display:flex或display: -webkit-box;或display: -webkit-inline-box;或display: inline-flex;时

以下是HTML代码：

<div class="form-group col-lg-12" style="padding: initial;">
<label class="control-label col-sm-12">Sample type :
</label>
<br>
<div class="col-sm-12 position">
 <div style="margin-right: 15px;">
 <label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1 
</label><br/>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>    
       </div>
   </div>


</div>

有人可以帮我弄清楚为什么我不能使用display:inline。感谢。

Answer 1

试试这个......

从代码中删除<br />标记。

＆＃13;

＆＃13;

.radio-style {
  margin-right: 15px;
  display: inline;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
  <label class="control-label col-sm-12">Sample type :
  </label>
  <br>
  <div class="col-sm-12  position">
    <div class="radio-style">
      <label class="radio-inline">
        <input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
      </label>
    </div>
    <div class="radio-style">
      <label class="radio-inline">
        <input type="radio" id="cia" name="qpd_type" value="2">Type 2
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

此外，您只需将两个无线电放入同一个div中即可。你不需要任何额外的CSS。 ：）

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12" style="padding: initial;">
  <label class="control-label col-sm-12">Sample type :
  </label>
  <br>
  <div class="col-sm-12  position">
    <div>
      <label class="radio-inline">
        <input type="radio" id="tee" name="qpd_type" value="5" checked>Type 1
      </label>
      <label class="radio-inline">
        <input type="radio" id="cia" name="qpd_type" value="2">Type 2
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试这样，

<强> HTML

<div class="form-group col-lg-12" style="padding: initial;">
   <label class="control-label col-sm-12">Sample type :
  </label>
<br>
<div class="col-sm-12 position">
 <div style="margin-right: 15px;">
 <label class="radio-inline">
<input type="radio" id="tee" name="qpd_type" value="5" checked >Type 1 
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" id="cia" name="qpd_type" value="2" >Type 2
</label>    
       </div>
   </div>    
</div>

<强> CSS

.radio-inline{
  float:left;
  display:inline;
}