CODEWITHSUNDEEP
htmlcssradio-button
Freshtone
Freshtone

Reputation: 27

Problems aligning radio buttons with text

I have the following markup:

    <ul>
    <label class="radio-label" for="${response[i].name}"><li><span>${freightName}:</span> ${response[i].price},-</li></label>
        <input class="radio-input" type="radio" id="${response[i].name}" name="drone" value="${response[i].name}-radio-value">
    </ul>

I get this as the result:

Result

I tried to set the label to position: absolute; but this just makes it more difficult to space vertically after, is there anyone who can give me a tip or two? Any help is greatly appreciated !

Cheers!

Upvotes: 2

Views: 51

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15213

You are using the <ul> tag and the <li> tag incorrectly. Here is the correct structure:

<ul>
    <li>
        any tags
    </li>
    <li>
        any tags
    </li>
    <li>
        any tags
    </li>
</ul>

Do it like this, wrapping it in a <li>...</li> tag.

<ul>
    <li>
        <label class="radio-label" for="${response[i].name}"><span>${freightName}:</span> ${response[i].price},-</label>
        <input class="radio-input" type="radio" id="${response[i].name}" name="drone" value="${response[i].name}-radio-value" />
    </li>
</ul>

Upvotes: 1

internet
internet

Reputation: 313

First, you're using HTML tags incorrectly. Please don't put any other tags in <ul> except <li>.

Refer: ul tag documentation

You might try something like this, which would put a label on top of a list item with radio button:

<ul>
  <li>
    <label>Label</label>
    <input class="radio-input" type="radio">
    <span>hi</span>
  </li>
</ul>

label {
  display: block;
}
li {
  list-style: none;
}

Codepen link

Upvotes: 1

Related Questions