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

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>和中插入“max-width: inherit” <input>，然后将 设置<p> max-width为 200px，这就像一个魅力，但显然会影响大屏幕上的布局。然后我尝试将其更改max-width为 100%，但它与以前一样。

Answer 1

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

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

</form>

CSS

form {
    max-width: auto;
}