正确地 space 输出 HTML 表单内的输入字段而不考虑屏幕尺寸？

Question

无论屏幕大小如何，输入字段都能正确 space 输出的最简单方法是什么？

我有以下 HTML form，如果在大显示器上打开它，输入字段和提交按钮对齐到顶部，留下大的白色 space表格的底部。我尝试输入 height:#%; 但运气不佳。有帮助吗？

.formTitle{
    border-bottom: solid red;
}
.form-style-5{
    position: relative;
    max-width: 60%;
    max-height: 82vh;
    padding: 10px 20px;
    background: #f4f7f8;
    margin: 10px auto;
    border-radius: 8px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.form-style-5:after{
    opacity: 1;
}

.form-style-5 fieldset{
    border: none;
}

.form-style-5 legend {
    font-size: 1.4em;
    margin-bottom: 10px;
}
.form-style-5 label {
    font-size: 1.3em;
    display: block;
    margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="location"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
    font-family: Georgia, "Times New Roman", Times, serif;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    margin: 0;
    outline: 0;
    padding: 2%;
    height: 6%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    background-color: #e8eeef;
    color:#8a97a0;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 3%;
    
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="location"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
    background: #d2d9dd;
}

.form-style-5 select{
    -webkit-appearance: menulist-button;
    height:35px;
}
.form-style-5 .number {
    background: red;
    color: #FCFBE3;
    height: 25px;
    width: 25px;
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
    line-height: 25px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 0px 15px 15px 15px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]{
    position: relative;
    display: block;
    padding: 10px 39px 10px 39px;
    color: #FCFBE3;
    margin: 0 auto;
    background: red;
    font-size: 18px;
    text-align: center;
    font-style: normal;
    width: 100%;
    border: 1px solid red;
    border-width: 1px 1px 3px;
    margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover{
    background: #b30000;
}
#name,
#contact,
#location,
#misc,
#job{
    height: 5%;
}

<div class="form-style-5">
                  <form action="send-sms.php" method="POST">
                     <fieldset>
                        <legend><div class="formTitle"> Fill out the form below to request help!</div></legend>
                        <input type="text" name="field1" id="name" placeholder="Your Name *">
                        <input type="text" name="field3" id="location" placeholder="Your Location (i.e. McNutt, exact address, etc.)*">
                        <input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important">
                        <input type="email" name="field2" id="email" placeholder="Email Address"><h4 style="padding-bottom: 3%; padding-left: 5px; float: left"><span class="number">or</span></h4>
                        <input type="text" name="field5" id="phone" placeholder="Phone Number">
                        <input type="text" id="task" name="field6" placeholder="Task that needs completion, let us know how we can help!*"></input>
                     </fieldset>
                     <input name="submit" type="submit" value="Submit" onClick="push();return validateForm();"/>
                  </form>
               </div>

Answer 1

将此 class 添加到 <fieldset>:

.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: space-between;
}

片段

.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: space-between;
}
.formTitle {
  border-bottom: solid red;
}
.form-style-5 {
  position: relative;
  max-width: 60%;
  max-height: 82vh;
  padding: 10px 20px;
  background: #f4f7f8;
  margin: 10px auto;
  border-radius: 8px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.form-style-5:after {
  opacity: 1;
}
.form-style-5 fieldset {
  border: none;
}
.form-style-5 legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}
.form-style-5 label {
  font-size: 1.3em;
  display: block;
  margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="location"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
  font-family: Georgia, "Times New Roman", Times, serif;
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 0;
  outline: 0;
  padding: 2%;
  height: 6%;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #e8eeef;
  color: #8a97a0;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  margin-bottom: 3%;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="location"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
  background: #d2d9dd;
}
.form-style-5 select {
  -webkit-appearance: menulist-button;
  height: 35px;
}
.form-style-5 .number {
  background: red;
  color: #FCFBE3;
  height: 25px;
  width: 25px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 25px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 0px 15px 15px 15px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
  position: relative;
  display: block;
  padding: 10px 39px 10px 39px;
  color: #FCFBE3;
  margin: 0 auto;
  background: red;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  width: 100%;
  border: 1px solid red;
  border-width: 1px 1px 3px;
  margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
  background: #b30000;
}
#name,
#contact,
#location,
#misc,
#job {
  height: 5%;
}

<div class="form-style-5">
  <form action="send-sms.php" method="POST">
    <fieldset class='flex'>
      <legend class="formTitle">Fill out the form below to request help!</legend>
      <input type="text" name="field1" id="name" placeholder="Your Name *">
      <input type="text" name="field3" id="location" placeholder="Your Location (i.e. McNutt, exact address, etc.)*">
      <input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important">
      <input type="email" name="field2" id="email" placeholder="Email Address">
      <h4 style="padding-bottom: 3%; padding-left: 5px; float: left"><span class="number">or</span></h4>
      <input type="text" name="field5" id="phone" placeholder="Phone Number">
      <input type="text" id="task" name="field6" placeholder="Task that needs completion, let us know how we can help!*"></input>
    </fieldset>
    <input name="submit" type="submit" value="Submit" onClick="push();return validateForm();" />
  </form>
</div>

Answer 2

在您的代码中，您使用了很多百分比值来调整元素的大小。尝试将这些百分比值更改为视口单位，因为这将使您的表单缩放效果更好。

关于这些值如何工作的更详细的解释： https://css-tricks.com/viewport-sized-typography/

正确地 space 输出 HTML 表单内的输入字段而不考虑屏幕尺寸？

Properly space out input fields inside HTML form regardless of screen size?

html

css

forms

padding

spacing

片段