Question

我正在尝试创建类似typeForm的表单。您可以在https://showroom.typeform.com/to/DYJEHG

找到示例

我成功实施了设计，但问题是我想关注页面垂直中心的li。我尝试了一切但失败了，谷歌没有教程我们如何做到这一点。请帮忙。

Answer 1

如果我没错，你希望表单字段位于中心（水平和垂直）并成为整页，对吗？

以下是您可能正在寻找的工作示例：http://codepen.io/anon/pen/ZewEMM

在这种情况下，

每个滚动关注一个输入字段：
使用名为 fullPage.js 的小插件。这将允许您关注每个滚动的一个输入字段。它真的很容易使用，看看吧！这是一个包含fullpage.js的表单示例：

<form method="post" action="">

  <div id="fullpage">
    <div class="section formfield">
      <div>
        FULL NAME<br/>
        <input type="text">
      </div>
    </div>
    <div class="section formfield">
      <div>
        EMAIL<br/>
        <input type="text">
      </div>
    </div>
    <div class="section formfield">
      <div>
        MESSAGE<br/>
        <input type="text">
      </div>
    </div>
  </div>

</form>

请注意，为了便于使用并避免混淆，我没有使用<li>。

您还可以通过JS轻松控制每个字段部分的颜色：

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#f0f0f0', '#cccccc', '#f0f0f0'], // section colors
    css3: true,
    scrollingSpeed: 1000
  });
});

垂直和水平居中表单字段：
通过将表单字段元素包装在div中来使用Flexbox。这是一个示例CSS代码：

.formfield > div {
   display: flex;
   align-items: center;
   justify-content: center;
}

如果这有帮助，请告诉我，也可以随时询问您是否在我的回答中发现任何含糊不清的内容。

聚焦在页面中心的li

1 个答案: