Question

我为我的Web表单做了一个简单的CSS设计，问题是在移动设备或任何小屏幕上，输入和验证码都从框架中逸出，但是提交按钮就很好了...我不知道如何要解决此问题，我对CSS的经验很少。

这是在移动设备上的外观：

这是我的代码：

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 120%;
  background: white;
}

form,
.dis {
  width: 30%;
  margin: 10px auto;
  padding: 20px;
  border: 3px solid #333333;
  background: white;
  border-radius: 5px 5px 10px 10px;
  text-align: center;
}

input {
  color: black;
  padding: 5px;
  width: auto;
  border: 2px solid black;
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  background: white;
}

h2 {
  width: 20%;
  margin: 10px auto;
  padding: 15px;
  border: 2px solid red;
  font-size: 75%;
  color: red;
  text-align: center;
}

 
<form id="dis" method="post">
  <input name="username" type="username" placeholder="What's your Discord tag?" size="40"><br><br>
  <input type="submit" name="submit" value="Submit"><br><br>
  <center>
    <div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
  </center>
</form>

Answer 1

您可以重置size属性的值，或为输入文本设置宽度。 size="30"在这里看起来不错，但是为了避免字体大小或字体家族带来的副作用，我建议您在CSS中也设置一个max-width。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size

size属性是一个数字值，指示输入字段应有多少个字符宽。该值必须是一个大于零的数字，默认值是20。由于字符宽度各不相同，因此这可能是正确的，也可能是不正确的，因此不应以此为准。根据字符和字体（使用的字体设置）的不同，输入的结果可能比指定的字符数窄或宽。

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 120%;
  background: white;
}

form,
.dis {
  width: 30%;
  margin: 10px auto;
  padding: 20px;
  border: 3px solid #333333;
  background: white;
  border-radius: 5px 5px 10px 10px;
  text-align: center;
}

input {
  color: black;
  padding: 5px;
  width: auto;
  border: 2px solid black;
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  background: white;
  max-width:90%;
}

h2 {
  width: 20%;
  margin: 10px auto;
  padding: 15px;
  border: 2px solid red;
  font-size: 75%;
  color: red;
  text-align: center;
}

<form id="dis" method="post">
  <input name="username" type="username" placeholder="What's your Discord tag?" size="30"><br><br>
  <input type="submit" name="submit" value="Submit"><br><br>
  <center>
    <div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
  </center>
</form>

Answer 2

尝试使用此功能，我所做的只是将box-sizing: border-box和width: 100%添加到输入中

    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    
    body {
      font-size: 120%;
      background: white;
    }
    
@media only screen and (max-width: 999px) {
form,
.dis {
  width: 30%;
  margin: 10px auto;
  padding: 20px;
  border: 3px solid #333333;
  background: white;
  border-radius: 5px 5px 10px 10px;
  text-align: center;
}
}

@media only screen and (min-width: 1000px) {
form,
.dis {
  width: 300px;
  margin: 10px auto;
  padding: 20px;
  border: 3px solid #333333;
  background: white;
  border-radius: 5px 5px 10px 10px;
  text-align: center;
        }
        }
    
    input {
      color: black;
      padding: 5px;
      width: 100%;
      border: 2px solid black;
      border-radius: 10px 10px 10px 10px;
      text-align: center;
      background: white;
    }
    
    h2 {
      width: 20%;
      margin: 10px auto;
      padding: 15px;
      border: 2px solid red;
      font-size: 75%;
      color: red;
      text-align: center;
    }

<form id="dis" method="post">
  <input name="username" type="username" placeholder="What's your Discord tag?" size="40"><br><br>
  <input type="submit" name="submit" value="Submit"><br><br>
  <center>
    <div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
  </center>
</form>

Answer 3

css输入中缺少的时髦规则是max-width属性：

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 120%;
  background: white;
}

form,
.dis {
  width: 30%;
  margin: 10px auto;
  padding: 20px;
  border: 3px solid #333333;
  background: white;
  border-radius: 5px 5px 10px 10px;
  text-align: center;
}

input {
  color: black;
  padding: 5px;
  width: auto;
  max-width: 95%;
  border: 2px solid black;
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  background: white;
}

h2 {
  width: 20%;
  margin: 10px auto;
  padding: 15px;
  border: 2px solid red;
  font-size: 75%;
  color: red;
  text-align: center;
}

<form id="dis" method="post">
  <input name="username" type="username" placeholder="What's your Discord tag?" size="30"><br><br>
  <input type="submit" name="submit" value="Submit"><br><br>
  <center>
    <div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
  </center>
</form>

我将如何防止表单内容离开框架？

3 个答案: