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

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：sharthit"，然后将<p> max-width设置为200px，它的工作方式像魅力一样工作，但显然会影响较大屏幕上的布局。然后，我尝试将此max-width更改为100％，但它与以前相同。

Answer 1

尝试一下，尽管您应该命名您的表格

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

CSS

form {
    max-width: auto;
}