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

时间:2017-06-05 16:27:00

标签: html css button radio

我的单选按钮出了问题。 我试图像其他元素一样修复背景上的单选按钮。 但现在,当我缩小页面时,它们会以背景滚动。 你能帮我么? 提前致谢! 例如:

Screenshot

$data = file_get_contents('php://input');

OR

$data = stream_get_contents(STDIN);
$data = $_POST['data'] or $_REQUEST['data'];

2 个答案:

答案 0 :(得分:0)

如果要在标签后设置单选按钮,则更新代码并在标签标记

后移动输入无线电
<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>

答案 1 :(得分:0)

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>