是否适当地在HTML表单内隔开输入字段,而不管屏幕大小如何?

古玛

无论屏幕大小如何,输入字段正确间隔最简单的方法是什么?

我有以下HTML form,如果在大型监视器上打开它,则输入字段和Submit按钮与顶部对齐,在窗体的底部留有较大的空白。我尝试输入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>

zer00ne

将此类添加到<fieldset>

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

SNIPPET

.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

不论屏幕大小如何,在HTML表单内正确地隔开输入字段?

来自分类Dev

如何适当地懒惰角组件?

来自分类Dev

如何适当地调用静态方法

来自分类Dev

如何适当地使视图的宽度相对

来自分类Dev

如何从超类适当地扩展

来自分类Dev

如何使用参数适当地`$ inject`?

来自分类Dev

如何在iOS中适当地发布多个表单变量

来自分类Dev

如何根据文本大小自动适当地增加标签?

来自分类Dev

如何根据我的需要适当地调整dijit / ConfirmDialog框的大小

来自分类Dev

我是否可以适当地兑现诺言?

来自分类Dev

适当地使用 onClick

来自分类Dev

如何适当地设计多个子类的组合?

来自分类Dev

如何编写代码以适当地利用CPU?

来自分类Dev

如何适当地提供与flask集成的静态js文件?

来自分类Dev

如何适当地限制“任意” UUID生成?

来自分类Dev

如何适当地调用构造函数并传递对象?

来自分类Dev

如何适当地将指针设置为新结构?

来自分类Dev

如何将内容适当地适合div

来自分类Dev

如何在引导程序中适当地使步骤居中?

来自分类Dev

如何通过LAN适当地基准测试延迟?

来自分类Dev

如何“适当地”不对水银进行更改?

来自分类Dev

如何使csv文件适当地分割行?

来自分类Dev

Java没有适当地保留巨大的初始堆大小

来自分类Dev

Java适当地处理异常

来自分类Dev

适当地使此类静态化?

来自分类Dev

当键盘处于活动状态时,如何在重新加载时阻止UITableView不适当地更改弹出窗口中的大小?

来自分类Dev

我是否为此策略模式适当地使用Java lambda?

来自分类Dev

如何适当地使用QThreadPool来执行多个大型计算任务?

来自分类Dev

如何适当地使LINQ在Visual Studio中自动格式化?

Related 相关文章

热门标签

归档