Как заставить поле ввода веб-страниц уменьшаться после определенной ширины окна?

Netko спросил: 13 июня 2018 в 02:36 в: html

Я начал следить за учебными пособиями о том, как создавать отзывчивые веб-страницы, и я наткнулся на проблему, которую я хочу решить. Когда я уменьшаю ширину окна браузера, я не хочу, чтобы форма просто переходила к следующей строке, когда она приближалась к заголовку h1, но вместо этого я хочу, чтобы поле ввода сжималось (или, по крайней мере, вся форма). Короче говоря, я хочу, чтобы весь раздел #newsletter оставался в одной строке при изменении размера окна.

/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.button_1 {
  height: 38px;
  background: #e8491d;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: white;
  background: #35424A;
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  float: right;
  margin-top: 15px;
}

#newsletter input[type='email'] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>
  <section id="newsletter">
    <div class="container">
      <h1>Subscribe to our newsletter</h1>
      <form>
        <input type="email" placeholder="Enter Email...">
        <button type="submit" class="button_1">Subscribe</button>
      </form>
    </div>
  </section>
</body>

</html>

Display: inline ничего не делает, и я предполагаю, что могу использовать медиа-запросы, но я не знаю, что CSS использовать в этом случае.

2 ответа

Andrzej Ziółek ответил: 13 июня 2018 в 02:44

display: flex для #newsletter form и #newsletter .container заставит их оставаться в одной строке, если вы не добавите свойство flex-wrap: wrap.

Если вы новичок в flexbox, я рекомендую это руководство.

Основная часть

#newsletter .container {
  display: flex;
}#newsletter form {
  display: flex;
  float: right;
  margin-top: 15px;
}

Фрагмент

/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.button_1 {
  height: 38px;
  background: #e8491d;
  border: none;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
}


/* Newsletter */

#newsletter {
  padding: 15px;
  color: white;
  background: #35424A;
}

#newsletter .container {
  display: flex;
}

#newsletter h1 {
  float: left;
}

#newsletter form {
  display: flex;
  float: right;
  margin-top: 15px;
}

#newsletter input[type='email'] {
  padding: 4px;
  height: 25px;
  width: 250px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>
  <section id="newsletter">
    <div class="container">
      <h1>Subscribe to our newsletter</h1>
      <form>
        <input type="email" placeholder="Enter Email...">
        <button type="submit" class="button_1">Subscribe</button>
      </form>
    </div>
  </section>
</body>

</html>
Arsalan Khattak ответил: 13 июня 2018 в 03:40

Если вам не нравится начальная ширина строки ввода или кнопки, просто измените ее ширину в CSS-коде.

Здесь я использовал CSS Grid. Я добавил ширину 100% для формирования, поэтому мы можем явно задать ширину элементов внутри формы, которые помогают нам автоматически изменять размеры элементов.

/* Global */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, 50%);
}

.button_1 {
    height: 38px;
    background: #e8491d;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    width: 100%;
}

/* Newsletter */
#newsletter {
    padding: 15px;
    color: white;
    background: #35424A;
}

#newsletter h1 {
    float: left;
}

#newsletter form {
    float: right;
    margin-top: 15px;
}

#newsletter input[type='email'] {
    padding: 4px;
    height: 25px;
    width:80%
}

form {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
}

form button {
    flex-shrink: 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <section id="newsletter">
        <div class="container">
            
            <h1>Subscribe to our newsletter</h1>
            <form>
                <input type="email" placeholder="Enter Email...">
                <button type="submit" class="button_1">Subscribe</button>
            </form>
        </div>
    </section>

Дополнительное видео по вопросу: Как заставить поле ввода веб-страниц уменьшаться после определенной ширины окна?

CSS Tutorials #10 Обсудми минимальную ширину и высоту Min-width, min-height

CSS Tutorials #6 Блочная верстка. Изменение ширины и высоты Адаптив

Какой ширины должен быть сайт?