如何防止输入字段在小型设备上超出其父级宽度？

Question

我有以下内容：

form {
	border: 1px solid #666;
}

<form action="#" method="post">
      <p>
        <label> Your name<br>
          <span>
            <input name="your-name" value="" size="40" type="text">
          </span>
        </label>
      </p>
      <p>
        <label> Your telephone<br>
          <span>
            <input name="your-tel" value="" size="40" type="tel">
          </span>
        </label>
      </p>
      <p>
        <label> Your email<br>
          <span>
            <input name="your-email" value="" size="40" type="email">
          </span>
        </label>
      </p>
      <p>
        <label> Subject<br>
          <span>
            <input name="your-subject" value="" size="40" type="text">
          </span>
        </label>
      </p>
      <p>
        <label> Attachments<br>
          <span>
            <input name="your-file" size="40" type="file">
          </span>
        </label>
      </p>
      <p>
        <label> Your message<br>
          <span>
            <textarea name="your-message" cols="40" rows="10" ></textarea>
          </span>
        </label>
      </p>
      <p>
        <input value="Send" type="submit">
      </p>
    </form>

CSS只是为了帮助可视化错误，即：在小屏幕（320x480）上，<input>s超出了表格边界。考虑到我无法更改HTML，我该如何防止这种情况？

例如，我尝试在每个<label>，<span>和<input>中插入“max-width：inherit”，然后将<p> max-width设置为200px，这就像一个魅力，但显然会影响大屏幕上的布局。然后我尝试将这个max-width改为100％，但它变得和以前一样。

Answer 1

试试这个，虽然你应该为你的表格命名

<form name="FormName" form action="#" method="post">

</form>

CSS

form {
    max-width: auto;
}