gpt4 book ai didi

html - 无论屏幕大小如何,在 HTML 表单中正确分隔输入字段?

转载 作者:太空宇宙 更新时间:2023-11-04 16:05:22 25 4
gpt4 key购买 nike

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

我有以下 HTML 表单,如果在大显示器上打开它,输入字段和提交按钮将对齐到顶部,在表单底部留下大空白。我尝试输入 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>

最佳答案

将此类添加到 <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>

关于html - 无论屏幕大小如何,在 HTML 表单中正确分隔输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38548674/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com