CSS - 表单未调整大小答案

【问题标题】：CSS - Form not re-sizingCSS - 表单未调整大小
【发布时间】：2018-01-09 12:05:04
【问题描述】：

我正在为一个 Wordpress 网站编写一些媒体查询，但我无法让我的表单随页面重新调整大小。我在一个前端站点上测试了这个，它是 WP 版本的前身，它可以工作，但在 WP 站点上它不想重新调整大小。我尝试了几种不同的方法来重新调整大小，但它不会移动。

body {
  
  margin: 0 auto 0 auto;
  
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

section#form, {
	height: 300px !important;
	max-width: 100%;
}


section#form h2 {
  font-size: 15px;
  margin-top: 50px;
  color: #000000;
}

span {
	color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email, .phone {
  margin-top: 20px;
}
.phone p, .email p {
  font-size: 10px;
  margin: 5px 0 0 10px;
}

.phone img, .email img {
	height: 30px;
	width: 30px;
}

.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}

section#form form {
  height: 200px;
  width: 600px;
  margin-top: 50px;
}

fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

section#form div.row {
  display: flex;
  max-width: 100%;
}

section#form div.row input {
  margin-left: 5px;
}
section#form div.row input:first-child {
  margin-left: 0;
}

section#form input[type=text],
section#form input[type=email] {
  background: #E8E8E8;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  padding: 6px 12px;
}

section#form textarea {
  resize: none;
  font-size: 10px;
  background: #E8E8E8;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 6px 12px;
  margin-bottom: 5px;
}

section#form input[type=submit] {
  background: #1ba4dd;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  width: 100%;
  
}

input[type=submit]:hover {
  background: #00bfff;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 ;
    width: calc(100% - 40px);
    box-sizing: border-box;
  }

  div.column {
    float: none;
   
  }
}

@media screen and (max-width: 480px) { 

  body {
    max-width: 500px;
    border: 1px dashed #ccc;
    min-height: 400px;
}

section#form {
    width: 100%;
    height: auto;
  }

  form  {

    height: auto;
    width: 100%;

  }


}

<body>
<section id="form">
        <div class="container">
            <div class="six columns">
                    <h2><span>To start getting great advice,</span> get in touch.</h2>
                        <div class="phone">
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/phone.png">
                            <p>0113 220 5265</p>
                        </div>
                        <div class="email">    
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/email.png">
                            <p>hello@featuremedia.co.uk</p>
                        </div>    
                        <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
            </div>            
                <div class="six columns">
                    <form>
                        <fieldset>
                            <div class="row">
                                    <input name="name" type="text" required placeholder="NAME">
                                    <input name="email" type="email" required placeholder="EMAIL">
                            </div>
                            <input name="subject" type="text" placeholder="SUBJECT">
                            <textarea rows="8" placeholder="MESSAGE..."></textarea>
                        </fieldset>
                            <input type="submit" value="SUBMIT">
                    </form>
                </div>
        </div>    
    </section>
</body>

我需要它在页面内调整大小。它第一次在前端版本上工作，但现在不行了。任何帮助表示赞赏。

【问题讨论】：

您的 form 元素已声明 width 但没有 max-width 属性。添加form { max-width: 100%; } 看看是否能解决您的问题
@Ihazkode 在主要样式中还是在媒体查询中？
在主要样式中，使其适用于所有设备
@Ihazkode 谢谢，成功了。

标签： css wordpress responsive-design

【解决方案1】：

section#form form {
  height: 200px;
  width: 100%;
  margin-top: 50px;
}

您可以使用Bootstrap Form 更轻松、更快捷地执行此操作。

【讨论】：

【解决方案2】：

您曾在某一时刻使用过固定值。如果你改变这个：

section#form form {
      height: 200px;
      width: 600px;
      margin-top: 50px;
}

到这里：

section#form form {
      height: 200px;
      margin-top: 50px;
}

它应该可以工作：

body {
  
  margin: 0 auto 0 auto;
  
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

section#form, {
	height: 300px !important;
	max-width: 100%;
}


section#form h2 {
  font-size: 15px;
  margin-top: 50px;
  color: #000000;
}

span {
	color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email, .phone {
  margin-top: 20px;
}
.phone p, .email p {
  font-size: 10px;
  margin: 5px 0 0 10px;
}

.phone img, .email img {
	height: 30px;
	width: 30px;
}

.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}

section#form form {
  height: 200px;
  margin-top: 50px;
}

fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

section#form div.row {
  display: flex;
  max-width: 100%;
}

section#form div.row input {
  margin-left: 5px;
}
section#form div.row input:first-child {
  margin-left: 0;
}

section#form input[type=text],
section#form input[type=email] {
  background: #E8E8E8;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  padding: 6px 12px;
}

section#form textarea {
  resize: none;
  font-size: 10px;
  background: #E8E8E8;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 6px 12px;
  margin-bottom: 5px;
}

section#form input[type=submit] {
  background: #1ba4dd;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  width: 100%;
  
}

input[type=submit]:hover {
  background: #00bfff;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 ;
    width: calc(100% - 40px);
    box-sizing: border-box;
  }

  div.column {
    float: none;
   
  }
}

@media screen and (max-width: 480px) { 

  body {
    max-width: 500px;
    border: 1px dashed #ccc;
    min-height: 400px;
}

section#form {
    width: 100%;
    height: auto;
  }

  form  {

    height: auto;
    width: 100%;

  }


}

<body>
<section id="form">
        <div class="container">
            <div class="six columns">
                    <h2><span>To start getting great advice,</span> get in touch.</h2>
                        <div class="phone">
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/phone.png">
                            <p>0113 220 5265</p>
                        </div>
                        <div class="email">    
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/email.png">
                            <p>hello@featuremedia.co.uk</p>
                        </div>    
                        <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
            </div>            
                <div class="six columns">
                    <form>
                        <fieldset>
                            <div class="row">
                                    <input name="name" type="text" required placeholder="NAME">
                                    <input name="email" type="email" required placeholder="EMAIL">
                            </div>
                            <input name="subject" type="text" placeholder="SUBJECT">
                            <textarea rows="8" placeholder="MESSAGE..."></textarea>
                        </fieldset>
                            <input type="submit" value="SUBMIT">
                    </form>
                </div>
        </div>    
    </section>
</body>

【讨论】：