Jeeva Jeeva - 2 months ago 10
CSS Question

Why isn't my inline working?

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

enter image description here

When i use
display:flex
or
display: -webkit-box;
or
display: -webkit-inline-box;
or
display: inline-flex;
on class position

enter image description here

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

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>

Comments