Why isn't my inline working? - html

Question

Below is a HTML Code but the display:inline isn't working. Am not able to understand why. But display:flex, display: -webkit-box;, display: -webkit-inline-box; , display: inline-flex; are working fine;
When i use display:inline on class position
When i use display:flex or display: -webkit-box; or display: -webkit-inline-box; or display: inline-flex; on class position
Below are the HTML Code:
<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>
Can somebody help me figure out why i cant use display:inline. Thanks.

Answer 1

Try this...
Remove the <br /> tag from your code.
.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>
Also, Simply you can place the two radios into the same div. You don't need any extra 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

Try it like this,
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;
}