Как укоротить гибкий элемент в форме, не нарушая макет? - PullRequest
Новая
       20

Как укоротить гибкий элемент в форме, не нарушая макет?

0 голосов
/ 22 мая 2019

Я создаю адаптивный сайт для мобильных устройств, используя формы.Это желаемый макет, который мне нужно создать после 769 пикселей.

enter image description here

Под контактная информация , Как мне сократить входной почтовый индекс, как он есть, и при этом сохранить его в том же самомместо с использованием flexbox?

Разве невозможно сделать это, используя только свойства flexbox, или мне нужно было бы сделать что-то еще, например, применить к нему свойство position?

Я правильно установил свойство flex-grow для остальных контейнеров, но я знаю, что должен что-то сделать для последнего flex-контейнера.Ниже мой HTML и CSS код для этого проекта.

* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

form {
  margin: 10px auto;
  width: 90%;
  background: #feffff;
  padding: 20px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
}
<header>
  <div class="header-content">
    <h1>The Code Review</h1>
  </div>
</header>

<div class="signup">
  <h2>Sign up for our newsletter</h2>
  <p>Get the latest news on how your code is doing right in your inbox</p>
</div>

<form action="index.html" get="post" class="registration-form">
  <fieldset class="first field">
    <legend>Contact Information</legend>

    <div class="contact-input">
      <label class="label" for="name">Name</label>
      <input class="input" type="text" id="name" name="user_name">
    </div>

    <div class="contact-input">
      <label class="label" for="mail">Email Address</label>
      <input class="input" type="email" id="mail" name="user_email">
    </div>

    <div class="contact-input">
      <label class="label" for="phone-number">Phone Number</label>
      <input class="input" type="tel" id="phone-number" name="user_phone">
    </div>

    <div class="contact-input">
      <label class="label" for="street">Street Address</label>
      <input class="input" type="text" id="street" name="user_street">
    </div>

    <div class="contact-input">
      <label class="label" for="city">City</label>
      <input class="input" type="text" id="city" name="user_city">
    </div>

    <div class="contact-input">
      <label class="label" for="state">State</label>
      <select class="input" id="state" name="user_state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>

    <div class="contact-input zip">
      <label class="label zip-label" for="zip">Zip Code</label>
      <input class="input zip-input" type="text" id="zip" name="user_zipcode">
    </div>


  </fieldset>

  <fieldset class="second field">
    <legend>Newsletter</legend>

    <p>Select the newspaper you'd like to recieve:</p>

    <div class="news-input">
      <input type="checkbox" id="html-news" name="user_htm-news" checked></input>
      <label for="html-news">HTML News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="css-news" name="user_css-news">
      <label for="css-news">CSS News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="javascript-news" name="user_javascript-news">
      <label for="javascript-news">Javascript News</label>
    </div>

    <p>Newsletter Format</p>

    <div class="news-input">
      <input type="radio" id="html" name="user_newsletter-format" checked>
      <label for="html">HTML</label>
    </div>

    <div class="news-input">
      <input type="radio" id="css-news" name="user_newsletter-format">
      <label for="css-news">CSS News</label>
    </div>

    <p>Other topics you'd like to hear about</p>
    <textarea id="topics" name="user_topics"></textarea>

  </fieldset>
  <button type="submit">Sign Up</button>

</form>

1 Ответ

0 голосов
/ 22 мая 2019

Основная проблема заключается в использовании flex-grow. 

.label,
.input {
    flex: 1; /* flex-grow: 1, flex-shrink: 0, flex-basis: 0 */
}
.input {
    flex: 3;
}

Активировав flex-grow для обоих элементов в строке, каждый из них всегда попытается использовать все свободное место в строке. Таким образом, никоим образом ввод (или метка) не может быть короче, потому что, пока есть свободное пространство, flex-grow заставляет его занимать это пространство.

Я думаю, вам лучше использовать flex-basis. С этим свойством у вас больше контроля над размерами гибких элементов.

Выполните эту настройку для своего кода: 

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex-basis: 25%;
  }
  .input {
    flex-basis: 75%;
  }
  .zip-input {
    flex-basis: 25%;
  }
}


* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

form {
  margin: 10px auto;
  width: 90%;
  background: #feffff;
  padding: 20px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex-basis: 25%;
  }
  .input {
    flex-basis: 75%;
  }
  .zip-input {
    flex-basis: 25%;
  }
}
<header>
  <div class="header-content">
    <h1>The Code Review</h1>
  </div>
</header>

<div class="signup">
  <h2>Sign up for our newsletter</h2>
  <p>Get the latest news on how your code is doing right in your inbox</p>
</div>

<form action="index.html" get="post" class="registration-form">
  <fieldset class="first field">
    <legend>Contact Information</legend>

    <div class="contact-input">
      <label class="label" for="name">Name</label>
      <input class="input" type="text" id="name" name="user_name">
    </div>

    <div class="contact-input">
      <label class="label" for="mail">Email Address</label>
      <input class="input" type="email" id="mail" name="user_email">
    </div>

    <div class="contact-input">
      <label class="label" for="phone-number">Phone Number</label>
      <input class="input" type="tel" id="phone-number" name="user_phone">
    </div>

    <div class="contact-input">
      <label class="label" for="street">Street Address</label>
      <input class="input" type="text" id="street" name="user_street">
    </div>

    <div class="contact-input">
      <label class="label" for="city">City</label>
      <input class="input" type="text" id="city" name="user_city">
    </div>

    <div class="contact-input">
      <label class="label" for="state">State</label>
      <select class="input" id="state" name="user_state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>

    <div class="contact-input zip">
      <label class="label zip-label" for="zip">Zip Code</label>
      <input class="input zip-input" type="text" id="zip" name="user_zipcode">
    </div>


  </fieldset>

  <fieldset class="second field">
    <legend>Newsletter</legend>

    <p>Select the newspaper you'd like to recieve:</p>

    <div class="news-input">
      <input type="checkbox" id="html-news" name="user_htm-news" checked></input>
      <label for="html-news">HTML News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="css-news" name="user_css-news">
      <label for="css-news">CSS News</label>
    </div>

    <div class="news-input">
      <input type="checkbox" id="javascript-news" name="user_javascript-news">
      <label for="javascript-news">Javascript News</label>
    </div>

    <p>Newsletter Format</p>

    <div class="news-input">
      <input type="radio" id="html" name="user_newsletter-format" checked>
      <label for="html">HTML</label>
    </div>

    <div class="news-input">
      <input type="radio" id="css-news" name="user_newsletter-format">
      <label for="css-news">CSS News</label>
    </div>

    <p>Other topics you'd like to hear about</p>
    <textarea id="topics" name="user_topics"></textarea>

  </fieldset>
  <button type="submit">Sign Up</button>

</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...