Question

我正在尝试使用仅限密码的登录系统，可以在此网址查看：http://tinyurl.com/qamzr9k

我抓住并使用CSS（来自CSS网站）来设置和定位登录框并提交按钮。

但是，屏幕上有一个灰色的大棒，只是登录框。

我想从那里移动那个丑陋的标题框，因为我想在登录表单上方放置其他内容。

但是，尽管我已经对CSS代码做出了努力和混乱的改变，但框架不会移动。

我还注意到错误的必需显示消息字段适合该框。（请在密码字段中输入任何内容并提交以查看我在说什么）。所以，我想知道移动灰色框是否意味着移动所需的消息显示。

整个CSS等太长了，无法在此列出。因此，请访问：http://tinyurl.com/qamzr9k，然后查看源代码。

我认为灰色框用页面正文中的以下片段标识（我重命名为div）;

<div class="topbar" style="width:500px; top: 209px; margin-left:auto; margin-right:auto; text-align:center"></div>

谢谢大家

Answer 1

试试这个：

form {
animation: 1.5s ease 0s normal none 1 appear;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(255, 255, 255, 0.4) inset, 0 1px 3px rgba(0, 0, 0, 0.45);
padding: 10px;
position: relative;
top: -54px;
}

正如您在此处所见，我添加了top，因此您的网页最初会隐藏错误框。

Answer 2

如果你将你的html重构为以下...通过在即将到来的div中包含表单，它应该包含该div中的所有表单...包括顶部栏。

<div class="coming-soon">
  <form method="post">
    <span>Incorrect code.</span>
    <input type="password" name="access_password"><input type="submit" name="Submit" value="Submit">
  </form>
</div>

我看不到

的使用

<div class="topbar" ...

所以可能会删除

然后，您可以根据需要设置表单的样式，使其保持相对于即将到来的div并在表单中始终附加错误消息

使用CSS更改对象位置

2 个答案: