响应式表单标签不会将内容下推

Question

我是制作响应式网页的新手。当表单标签的高度增加时，我无法将内容向下推。当表单的标签在小页面宽度的长度增长时，不会将橙色框向下推。我的代码在这里：

<html>
<head>
 <style type="text/css">
  #form{
   z-index: 2;
   position:relative;
   width: 35.42%;
   margin-left: 32.71%;
  }

  .column {
   display: inline;
   float: left;
   clear: both;
  }

  #formDiv{
   z-index: 3;
      position: relative;
      margin-right: -10000px;
      width: 100.59%;
      left: 0.3%;
  }

  #label {
      z-index: 4;
      min-height: 28px;
      line-height: 14px;
       text-align: left;
      font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
      position: relative;
      margin-right: -10000px;
      width: 30%;
  }

  .leftinline{
      display: inline;
      float: left;
  }

  #input {
      z-index: 8;
      min-height: 26px;
      background-color: orange;
      position: relative;
      margin-right: -10000px;
      margin-top: 27px;
      width: 50%;
  } 
 </style>
</head>
<body style="word-wrap:break-word;margin-top:30px;width:100%">
 <form class = "column" id="form" action="/action_page.php">
  <div id="formDiv">
   <label class="leftinline" id="label">
    <span>Nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
   </label>
   <span class="leftinline" id="input"></span>
  </div>
 </form>
</body>
</html>

谁能帮我解决这个问题？谢谢

Answer 1

由于 label 和 span 是浮动的，只要有足够的 space，它们就会堆叠 side-by-side，所以要强制换行，请清除浮动通过将 clear: left; 添加到您的 .leftinline 规则

<html>
<head>
 <style type="text/css">
  #form{
   z-index: 2;
   position:relative;
   width: 35.42%;
   margin-left: 32.71%;
  }

  .column {
   display: inline;
   float: left;
   clear: both;
  }

  #formDiv{
   z-index: 3;
      position: relative;
      margin-right: -10000px;
      width: 100.59%;
      left: 0.3%;
  }

  #label {
      z-index: 4;
      min-height: 28px;
      line-height: 14px;
       text-align: left;
      font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
      position: relative;
      margin-right: -10000px;
      width: 30%;
  }

  .leftinline{
      display: inline;
      float: left;
        clear: left;
  }

  #input {
      z-index: 8;
      min-height: 26px;
      background-color: orange;
      position: relative;
      margin-right: -10000px;
      margin-top: 27px;
      width: 50%;
  } 
 </style>
</head>
<body style="word-wrap:break-word;margin-top:30px;width:100%">
 <form class = "column" id="form" action="/action_page.php">
  <div id="formDiv">
   <label class="leftinline" id="label">
    <span>Nameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
   </label>
   <span class="leftinline" id="input"></span>
  </div>
 </form>
</body>
</html>

响应式表单标签不会将内容下推

Responsive form label doesnot push content down

html

css

responsive