HTML 文本对媒体标签没有反应

Question

嘿，我旁边有一些带有输入等的文本。我想让它们响应，以便文本位于其右侧的输入之上。但我不知道该怎么做。

他们确实向左移动，但似乎他们仍然使用 margin-left。所以我认为放入 margin-left: 0px; 会有所帮助。

MediaTAG 和代码片段:

@media screen and (max-width: 600px) {
  .block {
    width: 100%;
    margin-left: 0px;
  }
}

<div class="CalculatorLeft" style="padding-left: 29px;" id="alles">
  <h2 style="color:#b70000;font-size:x-large;">BEREKEN DIRECT UW PRIJS</h2>
  <h2 style="color:lightgrey;font-size:medium;">Voor het schuren van uw houten vloer</h2>
  <div class="block">
    <label>Aantal vierkante meters<sup>2</sup></label>
    <input id="metersinput" type="text" placeholder="Aantal vierkante meter" style="border:0px;border-bottom:1px solid #b70000;margin-left: 90px;width:200px;" onchange="pr2()" />
  </div><br>
  <div class="block">
    <label>V-naden aanwezig</label>
    <select name="cars" class="" style="border:0px;border-bottom:1px solid #b70000;margin-left: 128px;width:200px;" id="state" onchange="weg(this)">
      <option value="behandeling" selected>Soort behandeling</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>

  </div><br>
  <div class="block">
    <label>Soort behandeling</label>
    <div class="switch-field" style="margin-left: 132px;margin-top: 0px;margin-bottom: -22px;">
      <input type="radio" id="switch_left" name="switch_2" value="yes" onclick="show1();" checked/>
      <label for="switch_left">Yes</label>
      <input type="radio" id="switch_right" name="switch_2" value="no" onclick="show2();" />
      <label for="switch_right">No</label>
    </div>
  </div><br>
  <div class="block">
    <label>Postcode & Huisnummer</label>
    <input type="text" placeholder="Postcode" style="border:0px;border-bottom:1px solid #b70000;margin-left: 90px;width:120px;" />
    <input type="text" placeholder="Huisnr" style="border:0px;border-bottom:1px solid #b70000;margin-left: 25px;width:50px;" />
  </div>
</div>

希望有人能给我指明正确的方向，我不是很擅长这些东西。 如果我需要放入 jsfiddle，只需对其进行评论即可。

Answer 1

您可以将标签的显示更改为 block ，以便它充当 block 级元素并且它将位于输入的顶部 你可以在媒体查询中改变它

label:{ display:block}