CSS 响应式表单设计问题

Question

我希望有人可以帮我处理表单的 CSS。 它在 320 像素宽和 720 像素宽时看起来不错，但是当我达到 968 像素宽时，我不知道如何修复它。这是它的外观和我希望它看起来如何的屏幕截图。现在的方式，最后三个元素在右边，但它没有与表单的顶部对齐。这里是页面的urlhttp://rat-pack.com/new/contact.php这里是css文件的urlhttp://rat-pack.com/new/css/contactform.css

这里是html和css的形式...

    #ContactForm {
    width:98%;
    margin-left:auto;
    margin-right:auto;
    padding:.3125em;
    border: 1px solid #000040;
    border-radius:.5em;
    color:#ffffff;
    box-shadow: 3px 3px 3px #808080;
    background-color:rgba(255, 255, 255, 0.75);
    text-align:left;
    padding:.3125em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    #FormFrame	{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }	
	
    #FormFrame ul {
    list-style: none;
    padding: 1.25em 0 0;
    font-size: .9375em; 
    line-height: 1;
    color:#000000;
    }

    #FormFrame li {
    padding: 0 0 .625em;
    font-size: .9375em; 
    line-height: 1;
    color:#000000;
    }

    #FormFrame legend {
    font-size: .9375em; 
    line-height: 1;
    }

    label {
    display: block;
    font-size: 1em;
    line-height: 1.25;
    padding: 0 0 .3125em;
    font-size: .9375em; 
    line-height: 1;
    color:#000000;
    }


    select, input, textarea {
    display: block;
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: .9375em;
    color:#000000;
    line-height: 1;
    font-weight: 500;
    padding: .625em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }


    textarea {
    padding-bottom: 5%;
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
    }

    .ValCode {
    color:#004000;
    font-family:times;
    font-style:italic;
    font-size:1em;
    font-weight:bold;
    }		

    .send {
    border-radius:.25em;
    border-color:#d8d8d8;
    border-width:.09375em;
    background-color:#004000;
    color:#ffffff;
    font-weight: bold;
    padding:.25em;
    }


    .send:hover {
    background: #002000;
    color:#f0f0f0;
    }

    .send:active,
    .send:focus {
    background: #001000;
    color:#d8d8d8;
    }			 



    @media screen and (min-width: 45em) {

    .name {
    padding-right: .625em;
    float: left;
    width: 48%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .email {
    padding-left: .625em;
    float: right;
    width: 48%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
	
    .message {
    display:block;
    clear:both;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .validation {
    float: left;
    width: 48%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .SendButton {
    margin-top:1.25em;
    display:inline-block;
    vertical-align:bottom;
    float: right;
    width: 48%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    }


    @media screen and (min-width: 60.5em) 
    {

    #FormFrame {
    vertical-align:top;
    }

    .SendTo, .name, .email {
    display:block;
    padding-right: .3125em;
    float: left;
    width: 48%;
    clear:left;
    }

    .message, .validation, .SendButton {
    display:block;
    padding-left: .3125em;
    float: right;
    width: 48%;
    clear:right;
    }
	
    }				

<form id="ContactForm" name="ContactForm" method="post" action="Contact.php" title="Contact T.R.A.P., T.T.T or CMC">
    <fieldset id="FormFrame">
    <ul>
    <li class="SendTo" title="Select who you are contacting">
    <label for="SendTo">Send To</label>
    <select name="SendTo">
    <option value="CMC Sales" title="CMC Sales">Sales</option>
    <option value="CMC Parts" title="CMC Parts">Parts</option>
    <option value="CMC Service" title="CMC Service">Service</option>
    </select>
    </li>
    <li class="name" title="Enter your name">
    <label for="YourName">Your Name</label>
    <input type="text" id="YourName" name="YourName" />
    </li>
    <li class="email" title="Enter your email address">
    <label for="YourEmail">Your Email</label>
    <input type="email" id="YourEmail" name="YourEmail" />
    </li>
    <li class="message" title="Enter your message">
    <label for="TheMessage">Say Something</label>
    <textarea id="TheMessage" name="TheMessage"></textarea>
    </li>
    <li class="validation" title="Enter the validation code">
    <label for="TC" id="LockedEl">Validation Code: <span class="ValCode"><?PHP echo $ShowTC ?></span></label>
    <input type="text" name="TC" size="6" value="" class="breg">
    </li>
    <li class="SendButton">
    <input class="send" type="submit" name="submit" value="Send It"  title="Send your email" />
    </li>
    </ul>
    </fieldset>
    </form>

Answer 1

所以，这里发生的情况是，您的 float:right 元素在您的 float:left 元素块之后开始浮动 -- 所以，这是预期的行为，但我知道这不是什么你要去。如果您不关心维护示例中元素的确切顺序，您可以使用以下 CSS 替换您的媒体查询，这样会更整齐：

@media screen and (min-width: 45em) and (max-width:60.49em) {
  .name,
  .email,
  .validation,
  .SendButton {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 49%;
  }
  .name,
  .validation {
    float: left;
    margin-right: 1%;
  }
  .email,
  .SendButton {
    float: right;
  }
  .SendButton {
    margin-top: 1.25em;
  }
}

@media screen and (min-width: 60.5em) {
  #FormFrame li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 49%;
  }
  #FormFrame li:nth-child(odd) {
    float: left;
    margin-right: 1%;
  }
  #FormFrame li:nth-child(even) {
    float: right;
  }
}

否则，您需要包装每个部分（一个用于发送到、您的姓名、您的电子邮件；另一个用于文本区域、验证代码和按钮）并将宽度和浮动应用于这些 div 列。由您决定额外的标记是否值得。

#ContactForm {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  padding: .3125em;
  border: 1px solid #000040;
  border-radius: .5em;
  color: #ffffff;
  box-shadow: 3px 3px 3px #808080;
  background-color: rgba(255, 255, 255, 0.75);
  text-align: left;
  padding: .3125em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#FormFrame {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#FormFrame ul {
  list-style: none;
  padding: 1.25em 0 0;
  font-size: .9375em;
  line-height: 1;
  color: #000000;
}
#FormFrame li {
  padding: 0 0 .625em;
  font-size: .9375em;
  line-height: 1;
  color: #000000;
}
#FormFrame legend {
  font-size: .9375em;
  line-height: 1;
}
label {
  display: block;
  font-size: 1em;
  line-height: 1.25;
  padding: 0 0 .3125em;
  font-size: .9375em;
  line-height: 1;
  color: #000000;
}
select,
input,
textarea {
  display: block;
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .9375em;
  color: #000000;
  line-height: 1;
  font-weight: 500;
  padding: .625em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
textarea {
  padding-bottom: 5%;
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}
.ValCode {
  color: #004000;
  font-family: times;
  font-style: italic;
  font-size: 1em;
  font-weight: bold;
}
.send {
  border-radius: .25em;
  border-color: #d8d8d8;
  border-width: .09375em;
  background-color: #004000;
  color: #ffffff;
  font-weight: bold;
  padding: .25em;
}
.send:hover {
  background: #002000;
  color: #f0f0f0;
}
.send:active,
.send:focus {
  background: #001000;
  color: #d8d8d8;
}
@media screen and (min-width: 45em) and (max-width: 60.49em) {
  .name,
  .email,
  .validation,
  .SendButton {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 49%;
  }
  .name,
  .validation {
    float: left;
    margin-right: 1%;
  }
  .email,
  .SendButton {
    float: right;
  }
  .SendButton {
    margin-top: 1.25em;
  }
}
@media screen and (min-width: 60.5em) {
  #FormFrame li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 49%;
  }
  #FormFrame li:nth-child(odd) {
    float: left;
    margin-right: 1%;
  }
  #FormFrame li:nth-child(even) {
    float: right;
  }
}

<form id="ContactForm" name="ContactForm" method="post" action="Contact.php" title="Contact T.R.A.P., T.T.T or CMC">
  <fieldset id="FormFrame">
    <ul>
      <li class="SendTo" title="Select who you are contacting">
        <label for="SendTo">Send To</label>
        <select name="SendTo">
          <option value="CMC Sales" title="CMC Sales">Sales</option>
          <option value="CMC Parts" title="CMC Parts">Parts</option>
          <option value="CMC Service" title="CMC Service">Service</option>
        </select>
      </li>
      <li class="name" title="Enter your name">
        <label for="YourName">Your Name</label>
        <input type="text" id="YourName" name="YourName" />
      </li>
      <li class="email" title="Enter your email address">
        <label for="YourEmail">Your Email</label>
        <input type="email" id="YourEmail" name="YourEmail" />
      </li>
      <li class="message" title="Enter your message">
        <label for="TheMessage">Say Something</label>
        <textarea id="TheMessage" name="TheMessage"></textarea>
      </li>
      <li class="validation" title="Enter the validation code">
        <label for="TC" id="LockedEl">Validation Code: <span class="ValCode"><?PHP echo $ShowTC ?></span>
        </label>
        <input type="text" name="TC" size="6" value="" class="breg">
      </li>
      <li class="SendButton">
        <input class="send" type="submit" name="submit" value="Send It" title="Send your email" />
      </li>
    </ul>
  </fieldset>
</form>