爲什麼我的內聯工作不正常？

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>

而且，只要你可以在兩個無線電放入同一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>

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