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> 中插入“max-width: inherit” , <span>和 <input> , 然后设置 <p> max-width到 200px，这很有效，但显然会影响大屏幕上的布局。然后我尝试更改此 max-width到 100%，但它只是变得和以前一样。

Answer 1

试试这个，尽管你也许应该给你的表单命名

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

</form>

CSS

form {
    max-width: auto;
}