文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么我的字段设置容器在移动视图中溢出，而不是在较大屏幕尺寸时溢出？

问为什么我的字段设置容器在移动视图中溢出，而不是在较大屏幕尺寸时溢出？
EN

Stack Overflow用户
提问于 2019-05-22 22:27:26
回答 2查看 41关注 0票数 0

我正在使用表单创建一个移动优先的响应式网站。这是我需要在769px之后创建的所需模型。https://ibb.co/LQ0Gwt7。以下是769px及以下版本所需的样机：https://ibb.co/7tbDShb，但为什么在769px之前，字段集容器的内容会溢出?是什么导致了这种情况的发生？为了清晰起见，我在某些元素周围设置了红色边框。看看这里：https://ibb.co/1J9n8pW

下面是我的CSS和HTML代码：

代码语言：javascript
复制
* {
  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: 70%;
  background: #feffff;
  padding: 30px;
  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;
}

.textarea {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  flex-direction: column;
}

.extra-info {
  text-align: center;
}

@media (min-width: 768px) {
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
  .zip-input,
  .zip-label {
    flex: 0;
    flex-basis: 25%;
  }
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registration Form</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>

<body>

  <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="form">

    <fieldset class="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="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>
      <div class="textarea">
        <textarea id="topics" name="user_topics"></textarea>
      </div>

    </fieldset>

    <div class="button">
      <button type="submit">Sign Up</button>
    </div>

    <div class="extra-info">
      <p>Copyright the Code Review</p>
    </div>

  </form>
</body>

</html>

​

html
css
flexbox
fieldset
EN

回答 2

Stack Overflow用户

发布于 2019-05-22 22:40:00

在小屏幕上，您必须设置

代码语言：javascript
复制
.form {
   width: 100%;
}

否则，较大的组件将溢出您太小的.form div。

​

代码语言：javascript
复制
* {
  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: 100%; /* SET TO 100% */
  background: #feffff;
  padding: 30px;
  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;
}

.textarea {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  flex-direction: column;
}

.extra-info {
  text-align: center;
}

@media (min-width: 768px) {

  .form{
    width: 70%;
  }
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
  .zip-input,
  .zip-label {
    flex: 0;
    flex-basis: 25%;
  }
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registration Form</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>

<body>

  <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="form form_setter">

    <fieldset class="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="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>
      <div class="textarea">
        <textarea id="topics" name="user_topics"></textarea>
      </div>

    </fieldset>

    <div class="button">
      <button type="submit">Sign Up</button>
    </div>

    <div class="extra-info">
      <p>Copyright the Code Review</p>
    </div>

  </form>
</body>

</html>

​

票数 0
EN

Stack Overflow用户

发布于 2019-05-22 22:52:08

这将是你最好的方法，不需要媒体查询：

代码语言：javascript
复制
.form {
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 1024px; //insert your prefer value here;
}
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56259154

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档