CODEWITHSUNDEEP
jqueryhtmlcss
jsPlayer
jsPlayer

Reputation: 1245

Aligning Radio buttons horizontally (in mobile)?

I have been trying to put a group of checkboxes in a horizontal layout. Assuming using this only in mobile is fine and is simple as different css using media query. I tried a lot of examples online like float, display inline bock etc. None seems to work for me or at least this code of mine. Any tips?. I rather have a css solution since I am using this setup only on mobile.

.dcenter-filters label input[type="radio"]{
  display: inline-block !important;
  float: left;
}
<div class="dcenter-filters">
  <div class="radio">
	<label>
      <input type="radio" name="gender" checked="checked" >MSSP
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Legal
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Policies & Procedures
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Performance Measures
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Forms
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="gender">Eligibility
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Benefits
    </label>
  </div>
  <div class="radio">
	<label>
      <input type="radio" name="gender">Marketing
    </label>
  </div>
</div>

Upvotes: 2

Views: 977

Answers (4)

VXp
VXp

Reputation: 12068

You need to target the wanted elements the correct way, like this:

.dcenter-filters > .radio {
  display: inline-block;
}
<div class="dcenter-filters">
  <div class="radio">
    <label><input type="radio" name="gender" checked="checked">MSSP</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Legal</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Policies & Procedures</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Performance Measures</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Forms</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Eligibility</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Benefits</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="gender">Marketing</label>
  </div>
</div>

Upvotes: 2

mscdeveloper
mscdeveloper

Reputation: 2889

Change div to span this inline element:

<div class="dcenter-filters">
  <span class="radio">
    <label><input type="radio" name="gender" checked="checked">MSSP</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Legal</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Policies & Procedures</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Performance Measures</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Forms</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Eligibility</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Benefits</label>
  </span>
  <span class="radio">
    <label><input type="radio" name="gender">Marketing</label>
  </span>
</div>

Upvotes: 2

ZhouBing Yang
ZhouBing Yang

Reputation: 105

I think you just have to change <div> to <span> for your radio button. Let me know if that is the answer you are looking for. 

<div>
    <span class="radio">
        <label><input type="radio" name="gender" checked="checked">MSSP</label>
    </span>
    <span class="radio">
        <label>
            <input type="radio" name="gender">Legal
        </label>
    </span>
</div>

Upvotes: 2

user3668347
user3668347

Reputation:

You can achieve this easily by adding this to your CSS:

.radio{
    float:left;
  }

Here's a fiddle: https://jsfiddle.net/9qtrbkc0/

Upvotes: 2

Related Questions