CODEWITHSUNDEEP
htmlcssradio-button
Arsalan Khattak
Arsalan Khattak

Reputation: 958

Unaligned Text and Radio Buttons

So I am trying to make a form with pure html and css but I have a problem with radio buttons . They are not aligning with the text .

.row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 40% 30%;
    align-content: center;
    grid-gap: 20px;
}
<div class="row">
    <label id="number-label" for="Age">* How likely is that you would recommend
        freeCodeCamp to a friend?</label>
    <ul style="list-style:none">
        <li class="radio">
            <label>Definitely<input type="radio" name="radio-button" order="1"
                    class="userRating"></label>
        </li>
    </ul>
</div>

Here in this snippet , it's working totally fine but on the web page it's showing like this enter image description here

I tried using margin-bottom but that isn't working as well.

UPDATE: problem solved. It was all because of this code.

input {
    height: 30px;
}

Upvotes: 2

Views: 637

Answers (2)

Richard Yan
Richard Yan

Reputation: 1296

You are nesting the text and the input in the wrong sequence. Correcting it and adding /> in input for good measure fixes it.

.row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 40% 30%;
    align-content: center;
    grid-gap: 20px;
}
 <div class="row">
                    <label id="number-label" for="Age">* How likely is that you would recommend freeCodeCamp to a friend?</label>
                    <ul style="list-style:none">
                        <li class="radio">
                            <label><input type="radio" name="radio-button" order="1" class="userRating" />Definitely</label>
                        </li>
                        
                        
                    </ul>
                    </div>

Upvotes: 1

antasp
antasp

Reputation: 304

By floating the checkbox to the left, it may look better. It's hard to say based on this example.

.row {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 40% 30%;
    align-content: center;
    grid-gap: 20px;
}
input[type=radio] {
float: left;
}
 <div class="row">
                    <label id="number-label" for="Age">* How likely is that you would recommend freeCodeCamp to a friend?</label>
                    <ul style="list-style:none">
                        <li class="radio">
                            <label>Definitely<input type="radio" name="radio-button" order="1" class="userRating"></label>
                        </li>
                        
                        
                    </ul>
                    </div>

Upvotes: 2

Related Questions