Question

当我缩小页面时，单选按钮将显示在下一个文本行上，如下所示：但是当我缩小页面时，单选按钮必须站在他们的位置。（不滚动背景，就像其他表单元素一样）你能帮我吗？

＆＃13;

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[id=Bert_natter] {
    display: block;
    margin-top: 10px;
}

label[class=number], select {
	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%;
}

＆＃13;

<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> <input type="radio" name="Ernest van der kwast" value="1">1</label>
        <label> <input type="radio" name="Ernest van der kwast" value="10">10</label>
        <label> <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>

＆＃13;

Answer 1

＆＃13;

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[id=Bert_natter] {
    display: block;
    margin-top: 10px;
}

label[class=number], select {
	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%;
}

＆＃13;

<div style="white-space: nowrap;">
<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> <input type="radio" name="Ernest van der kwast" value="1">1</label>
        <label> <input type="radio" name="Ernest van der kwast" value="10">10</label>
        <label> <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> 
</div>

＆＃13;

如何设置固定在背景上的单选按钮？

1 个答案: