我似乎无法弄清楚如何阻止我的 html 表单在调整页面大小时分开并向下移动
I can't seem to figure out how to stop my html form from splitting apart and shifting down when resizing the page
我正在开发一个 rails 应用程序,但我一直遇到这个问题,每次我调整页面大小时,我的 html 表单总是分开并向下移动。我试过用标签包装它,尝试不同的位置、浮动和显示,但似乎没有任何效果。目前,这是我的代码。另外,我有一些结果的图片。
您将如何防止这种情况发生?如果发生任何变化,这在生产和开发环境中都会发生。
html:
<div id="containerc">
<div id="contcontent">
<div id="formwrapper">
<form action="/contacts" method="POST">
<label for="fullname" class="label" id="fullname">Full Name*</label>
<input type="text" name="fullname" class="input" id="ifullname" style="width: 48.5vw; height: 2.5vw; font-size: 1.5vw;" />
<label class="label" id="email" for="email">Email*</label>
<input id="iemail" type="text" name="email" class="input" style="font-size:
1.5vw; width: 48.5vw; height: 2.5vw;" />
<label for="company" class="label" id="company">Company</label>
<input type="text" name="company" class="input" id="icompany" style="width:
48.5vw; height: 2.5vw; font-size: 1.5vw;" />
<label for="message" class="label" id="message">Message</label>
<textarea id="imessage" name="message" class="input" style="width: 48.5vw;
height: 8vw; font-size: 1.2vw;"></textarea>
<input type="submit" id="submit" value="Submit" style="width: 10vw; height:
2vw;" />
</form>
</div>
</div>
</div>
css:
h1#cont {
text-align: center;
bottom: 31vw;
position: absolute;
font-size: 7vw;
left: 32.3vw;
font-family: albaregular;
}
form {
position: absolute;
bottom: 55vw;
white-space: nowrap;
}
label#fullname.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -20vw;
z-index: 1;
}
label#email.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -26vw;
z-index: 7;
}
label#company.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -32vw;
z-index: 3;
}
label#message.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -38vw;
z-index: 4;
}
input#ifullname.input {
left: 25.3vw;
bottom: -23vw;
position: absolute;
z-index: 0;
}
input#iemail.input {
left: 25.3vw;
bottom: -29vw;
position: absolute;
z-index: 0;
}
input#icompany.input {
left: 25.3vw;
bottom: -35vw;
position: absolute;
z-index: 0;
}
textarea.input {
left: 25.3vw;
bottom: -46.5vw;
position: absolute;
z-index: 0;
}
input#submit {
left: 43vw;
font-size: 1vw;
position: absolute;
bottom: -52vw;
font-family: eb_garamond_sc08_regular;
}
图片:
Fullscreen
Mobile
我已经采用了你的 HTML 并删除了所有定位,只使用了一个包装器 div
将整个表单居中
display: grid;
place-items: center;
并使用
对齐列中的表单元素
display: flex;
flex-direction: column;
在 form
.
:root {
font-size: 1vw; /* questionable from a design perspective */
}
input,
textarea {
font-size: inherit;
}
.wrapper {
display: grid;
place-items: center;
}
.form {
display: flex;
flex-direction: column;
}
.button {
align-self: center;
}
<div class="wrapper">
<form class="form" action="/contacts" method="POST">
<label for="ifullname" class="label" id="fullname">Full Name*</label>
<input type="text" name="fullname" class="input" id="ifullname"/>
<label class="label" id="email" for="iemail">Email*</label>
<input id="iemail" type="text" name="email" class="input"/>
<label for="icompany" class="label" id="company">Company</label>
<input type="text" name="company" class="input" id="icompany"/>
<label class="label" for="imessage" class="label" id="message">Message</label>
<textarea id="imessage" name="message" class="input"></textarea>
<input class="button" type="submit" id="submit" value="Submit"/>
</form>
</div>
只要您的布局保持相当简单,您就应该使用该模板作为基础,如果您愿意,可以只使用一些不同的填充或调整字体大小...
另请注意,在 label
的 for
中,您需要指定引用的 input
的 id
而不是 name
才能正常工作。
我正在开发一个 rails 应用程序,但我一直遇到这个问题,每次我调整页面大小时,我的 html 表单总是分开并向下移动。我试过用标签包装它,尝试不同的位置、浮动和显示,但似乎没有任何效果。目前,这是我的代码。另外,我有一些结果的图片。
您将如何防止这种情况发生?如果发生任何变化,这在生产和开发环境中都会发生。
html:
<div id="containerc">
<div id="contcontent">
<div id="formwrapper">
<form action="/contacts" method="POST">
<label for="fullname" class="label" id="fullname">Full Name*</label>
<input type="text" name="fullname" class="input" id="ifullname" style="width: 48.5vw; height: 2.5vw; font-size: 1.5vw;" />
<label class="label" id="email" for="email">Email*</label>
<input id="iemail" type="text" name="email" class="input" style="font-size:
1.5vw; width: 48.5vw; height: 2.5vw;" />
<label for="company" class="label" id="company">Company</label>
<input type="text" name="company" class="input" id="icompany" style="width:
48.5vw; height: 2.5vw; font-size: 1.5vw;" />
<label for="message" class="label" id="message">Message</label>
<textarea id="imessage" name="message" class="input" style="width: 48.5vw;
height: 8vw; font-size: 1.2vw;"></textarea>
<input type="submit" id="submit" value="Submit" style="width: 10vw; height:
2vw;" />
</form>
</div>
</div>
</div>
css:
h1#cont {
text-align: center;
bottom: 31vw;
position: absolute;
font-size: 7vw;
left: 32.3vw;
font-family: albaregular;
}
form {
position: absolute;
bottom: 55vw;
white-space: nowrap;
}
label#fullname.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -20vw;
z-index: 1;
}
label#email.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -26vw;
z-index: 7;
}
label#company.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -32vw;
z-index: 3;
}
label#message.label {
font-family: eb_garamond_sc08_regular;
font-size: 2vw;
position: absolute;
left: 25.4vw;
bottom: -38vw;
z-index: 4;
}
input#ifullname.input {
left: 25.3vw;
bottom: -23vw;
position: absolute;
z-index: 0;
}
input#iemail.input {
left: 25.3vw;
bottom: -29vw;
position: absolute;
z-index: 0;
}
input#icompany.input {
left: 25.3vw;
bottom: -35vw;
position: absolute;
z-index: 0;
}
textarea.input {
left: 25.3vw;
bottom: -46.5vw;
position: absolute;
z-index: 0;
}
input#submit {
left: 43vw;
font-size: 1vw;
position: absolute;
bottom: -52vw;
font-family: eb_garamond_sc08_regular;
}
图片:
Fullscreen
Mobile
我已经采用了你的 HTML 并删除了所有定位,只使用了一个包装器 div
将整个表单居中
display: grid;
place-items: center;
并使用
对齐列中的表单元素display: flex;
flex-direction: column;
在 form
.
:root {
font-size: 1vw; /* questionable from a design perspective */
}
input,
textarea {
font-size: inherit;
}
.wrapper {
display: grid;
place-items: center;
}
.form {
display: flex;
flex-direction: column;
}
.button {
align-self: center;
}
<div class="wrapper">
<form class="form" action="/contacts" method="POST">
<label for="ifullname" class="label" id="fullname">Full Name*</label>
<input type="text" name="fullname" class="input" id="ifullname"/>
<label class="label" id="email" for="iemail">Email*</label>
<input id="iemail" type="text" name="email" class="input"/>
<label for="icompany" class="label" id="company">Company</label>
<input type="text" name="company" class="input" id="icompany"/>
<label class="label" for="imessage" class="label" id="message">Message</label>
<textarea id="imessage" name="message" class="input"></textarea>
<input class="button" type="submit" id="submit" value="Submit"/>
</form>
</div>
只要您的布局保持相当简单,您就应该使用该模板作为基础,如果您愿意,可以只使用一些不同的填充或调整字体大小...
另请注意,在 label
的 for
中,您需要指定引用的 input
的 id
而不是 name
才能正常工作。