2

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!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Freshtone
  • 27
  • 5

2 Answers2

1

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

internet
  • 303
  • 3
  • 19
1

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>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
  • thank you for the reply ! i managed to get it working in the ned, it was as you said with the wrong usage of Lists and ul and li and such :) cheers ! – Freshtone Mar 04 '21 at 12:25
  • @Freshtone, I am very glad that you managed to solve this problem. If there are questions, let me know. – s.kuznetsov Mar 04 '21 at 12:26