我似乎无法弄清楚如何阻止我的 html 表单在调整页面大小时分开并向下移动

Question

我正在开发一个 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

Answer 1

我已经采用了你的 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 才能正常工作。

我似乎无法弄清楚如何阻止我的 html 表单在调整页面大小时分开并向下移动

I can't seem to figure out how to stop my html form from splitting apart and shifting down when resizing the page

html

css

ruby

ruby-on-rails-6

capistrano3