html - 为什么我的内联不起作用？

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 />从您的代码中标记。

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

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

此外，只需将两个 radio 放在同一个 div 中即可。你不需要任何额外的 CSS。 :)

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