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

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] { 
 
\t display: inline-block; 
 
    margin-top: 20px; 
 
    width: 345px; 
 
} 
 

 
#bestellen input[type=number], #bestellen input[type=text], select { 
 
\t 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 { 
 
\t 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] { 
 
\t display: inline-block; 
 
    margin-top: 20px; 
 
    width: 345px; 
 
} 
 

 
#bestellen input[type=number], #bestellen input[type=text], select { 
 
\t 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 { 
 
\t 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>