单选按钮随着背景滚动，如何解决这个问题？

Question

我的单选按钮有问题。 我正在尝试修复背景上的单选按钮，就像其他元素一样。 但是现在当我缩小页面时，它们会随着背景滚动。 你能帮我么？ 提前致谢！ 例如：

label[class=number]::before {
    counter-increment: section;
    content: counter(section) " " ;
    display: inline-block;
    color: white;
    width: 20px;
    background-color: black;
    text-align: center;
    padding-top: 1%;
    margin-left: 10px;
    padding-bottom: 1%;
}

label[class=number] {
	display: inline-block;
    margin-top: 20px;
    width: 345px;
}

#bestellen input[type=number], #bestellen input[type=text], select {
	width: 40px;
    margin-left: 102%;
    display: block;
    margin-top: -7%;
    border-color: skyblue;
    border-style: double;
}

input[type=range] {
    width: 40px;
    position: relative;
    margin-left: 102%;
    background-color: transparent;
    margin-top: -5%;
    display: block;
}

small {
	display: block;
    margin-left: 420px;
    margin-top: -1.5%;
}

<form id="bestellen" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
        <label class="number" id="David_Vann">David Vann - Aquarium: <input size="3" name="David_Vann" type="number" min="1"></label><small> Max. 10 exemplaren</small>
        <label class="number" id="Robert_Seethaler">Robert Seethaler - Een heel leven: <input size="3" name="Robert_Seethaler" type="text" pattern="[0-9]{2}"></label><small> Max. 99 exemplaren</small>
        <label id="Paula" class="number">Paula Hawkins - Het meisje in de trein: <input name="Paula_Hawkins" type="range" min="0" max="15" step="5" list="Paula_Hawkins"></label><small>Bestel 0, 5, 10 of 15 exemplaren</small>
          <datalist id="Paula_Hawkins">
            <option value="0">
            <option value="5">
            <option value="10">
            <option value="15">
         </datalist>
        <label class="number" id="Ernest_van_der_kwast">Ernest van der Kwast - De ijsmakers: </label>
        <label id="ernest"> <input type="radio" name="Ernest van der kwast" value="1">1</label>
        <label id="ernest"> <input type="radio" name="Ernest van der kwast" value="10">10</label>
        <label id="ernest"> <input type="radio" name="Ernest van der kwast" value="20">20</label><br>
        <label class="number" id="Bert_natter">Bert Natter - Remington: 
            <select name="Bert Natter"> 
              <option value="geen">geen</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
             </select>
         </label>
   </form> 

Answer 1

如果你想在标签之后设置单选按钮，那么更新代码并在标签标签之后移动输入单选

<label id="ernest"> 1<input type="radio" name="Ernest van der kwast" value="1"></label>
<label id="ernest"> 10<input type="radio" name="Ernest van der kwast" value="10"></label>
<label id="ernest"> 20<input type="radio" name="Ernest van der kwast" value="20"></label><br>

Answer 2

label[class=number]::before {
    counter-increment: section;
    content: counter(section) " " ;
    display: inline-block;
    color: white;
    width: 20px;
    background-color: black;
    text-align: center;
    padding-top: 1%;
    margin-left: 10px;
    padding-bottom: 1%;
}

label[class=number] {
	display: inline-block;
    margin-top: 20px;
    width: 345px;
}

#bestellen input[type=number], #bestellen input[type=text], select {
	width: 40px;
    margin-left: 102%;
    display: block;
    margin-top: -7%;
    border-color: skyblue;
    border-style: double;
}

input[type=range] {
    width: 40px;
    position: relative;
    margin-left: 102%;
    background-color: transparent;
    margin-top: -5%;
    display: block;
}

small {
	display: block;
    margin-left: 420px;
    margin-top: -1.5%;
}

<form id="bestellen" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
        <label class="number" id="David_Vann">David Vann - Aquarium: <input size="3" name="David_Vann" type="number" min="1"></label><small> Max. 10 exemplaren</small>
        <label class="number" id="Robert_Seethaler">Robert Seethaler - Een heel leven: <input size="3" name="Robert_Seethaler" type="text" pattern="[0-9]{2}"></label><small> Max. 99 exemplaren</small>
        
        <label id="Paula" class="number">Paula Hawkins - Het meisje in de trein: <input name="Paula_Hawkins" type="range" min="0" max="15" step="5" list="Paula_Hawkins"></label><small>Bestel 0, 5, 10 of 15 exemplaren</small>
          <datalist id="Paula_Hawkins">
            <option value="0">
            <option value="5">
            <option value="10">
            <option value="15">
         </datalist>
         <br>
         
         
        <label class="number" id="Ernest_van_der_kwast">Ernest van der Kwast - De ijsmakers: </label>
        
        1<label id="ernest"> <input type="radio" name="Ernest van der kwast" value="1"></label>
        10<label id="ernest"> <input type="radio" name="Ernest van der kwast" value="10"></label>
        20<label id="ernest"> <input type="radio" name="Ernest van der kwast" value="20"></label><br>
        
        
        <label class="number" id="Bert_natter">Bert Natter - Remington: 
            <select name="Bert Natter"> 
              <option value="geen">geen</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
             </select>
         </label>
   </form>