Как бы я не допустить, чтобы содержимое этой формы оставляло рамку? - PullRequest
Новая
       17

Как бы я не допустить, чтобы содержимое этой формы оставляло рамку?

0 голосов
/ 03 июля 2019

Я сделал этот простой CSS-дизайн для моей веб-формы, и проблема в том, что на мобильном или любом маленьком экране ввод и капча выходят из фрейма, но кнопка «Отправить» в порядке ... Я не знаю, какчтобы исправить это, и у меня мало опыта в css.

Вот как это выглядит на мобильном телефоне:

enter image description here

и вот мой код: 

* {
  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>

Ответы [ 3 ]

0 голосов
/ 03 июля 2019

Попробуйте использовать это, все, что я сделал, просто добавив 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>
0 голосов
/ 03 июля 2019

Стильное правило, которое вы пропускаете при вводе 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>
0 голосов
/ 03 июля 2019

Вы можете сбросить значение вашего атрибута размера или установить ширину введенного текста.size="30", кажется, здесь хорошо, но чтобы избежать побочных эффектов от размера шрифта или семейства, я бы посоветовал также установить max-width в вашем CSS.

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>
...