CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Baoky chen
Baoky chen

Reputation: 99

Radio Button not inline with label

I have this code at JsFiddle

<form>
    <div style="margin:0;padding:0;display:inline"></div>

    <div class="field">
        <label for="input_user_id">User ID</label>
        <input class="form-control" id="input_user_id" name="input_user_id" type="text" placeholder="" value="KING0002" readonly>
    </div>

    <div class="field">
        <label for="input_name">Name</label>
        <input class="form-control" id="input_name" name="input_name" type="text" placeholder="Name">
    </div>

    <div class="field">
        <label for="input_password">Password</label>
        <input class="form-control" id="input_password" name="input_password" type="password" placeholder="Password">
    </div>

    <div class="field">
        <label for="credit">Credit </label>
        <input class="form-control" id="credit" name="credit_limit" type="text" placeholder="Credit">
    </div>

    <div class="field">
        <div class="form-group">
            <label for="create_member">Can Create Member</label>
            <input type="radio" name="create_member" value="no" checked>No &nbsp;&nbsp;
            <input type="radio" name="create_member" value="yes">Yes
        </div>
    </div>
</form>

I am using twitter bootstrap for my textfield, form control class, I tried to add radio button

e.g

Can Create Member:  yes [] no []

But the output appear that the yes and no are above each other.

How do I change to have a proper inline radio button and the alignment is about same as the textfield regardless of screen resolution ( be it mobile or desktop )

Upvotes: 0

Views: 3521

Answers (1)

Mritunjay
Mritunjay

Reputation: 25882

That is because you have given 50% width to all input elements. Just exclude radio inputs using not like bellow

.field input:not([type="radio"]) {
    width: 50%;
    margin: 0px;
  }

DEMO

Upvotes: 1

Related Questions