logo标签列表

改变HTML元素的位置？

htmlcss
3

我是一个新手学习HTML和CSS。我正在尝试在网页上移动元素。这是当前网页的样子：

enter image description here

以下是此网页的代码：

index.php:

<body>
    <div class="wrapper">
        <h2 id="loginText" style="top:383px" >Login</h2>
        <p id="credentialsText">Please fill in your credentials to login </p>
        <form id="formOverall" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Username</label>
                <input type="text" name="username"class="form-control" value="<?php echo $username; ?>">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div>    
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Password</label>
                <input type="password" name="password" class="form-control">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
       </form>
    </div> 
</body>

然而，所有的文本仍然出现在页面的左上角。我希望说“登录”的文本出现在页面更下方。这就是为什么我设置了样式：“top: 383px”。然而，无论我在其样式属性中设置什么，该文本都不会从之前的位置移动。为什么这个文本不管我怎么设置它的样式属性都不会动呢？

5个回答
4

top 只能与某些 position 值一起使用。可以使用 margin 来代替，像这样：

<h2 id="loginText" style="margin-top:383px" >Login</h2>

这应该可以满足您的需求。您还可以使用 margin-left等方式将其移动到右边。

如果您想使用 top，可以尝试这样做：

<h2 id="loginText" style="position: absolute; top:383px" >Login</h2>

绝对定位允许您使用 top、left、right 和 bottom 在页面上绝对定位元素。您可以在此处了解更多关于 position 属性的知识，以及此处了解更多关于 top 属性的知识。
0

没有 CSS 很难确定问题所在，但我猜测您没有为元素声明一个 position 属性，这意味着它默认为 position: static，也就是说它不会移动。因此，如果您想要移动该项，您需要声明 position: relative，然后应用 top: 383px。话虽如此，更常见的做法是设置 margin-top: 383px。同样，如果您添加使用的 CSS 的副本，将更容易解决问题。

0

登录表单的最佳位置是在 <div> 中填充表单。然后，您可以使用样式 margin: 0 auto; 将此 div 设置为屏幕中心（水平）。要垂直对齐，您可以使用一些 js 或 margin-top:，但使用百分比...（不要忘记比您拥有的屏幕更小）

-1

请确保定义位置类型。

<h2 id="loginText" style="top:383px; position:fixed" >Login</h2>

fixed 意味着位置（top:383px）相对于窗口固定。还有其他位置类型，如 absolute、relative 或 sticky。

-1
兄弟，使用 <div class="container m-5"> 这个标签，它会为你创建一个容器，并且在顶部给你一些边距。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接