是否更改html元素的位置？
是否更改html元素的位置？
提问于 2018-08-05 01:23:36
我刚接触html和css。我正在尝试在网页上移动项目。这是网页现在的样子：
我有这个网页的以下代码：
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>但是，所有文本仍显示在页面的左上角。我希望登录的文本出现在页面的下方。这就是为什么我设置了style:"top: 383px“。但是，此文本不会从以前的位置移动。为什么不管我在样式属性中设置了什么，这个文本都不会移动？
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-08-05 01:27:31
Stack Overflow用户
发布于 2018-08-05 01:29:44
如果没有CSS，很难判断问题出在哪里，但我猜测您没有为元素声明position属性，这意味着它缺省为position: static，这意味着它不会移动。因此，如果要移动项，则需要声明position: relative，然后应用top: 383px。也就是说，更常见的做法是只设置margin-top: 383px。同样，如果您添加您正在使用的CSS的副本，将更容易解决此问题。
Stack Overflow用户
发布于 2018-08-05 01:30:54
登录表单的最佳定位是在<div>中填写表单。然后你可以通过使用样式margin: 0 auto;设置到屏幕的这个分区中心(水平方向)并垂直对齐，你可以使用一些js或margin-top:，但使用% ...(别忘了屏幕要比你的小)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51687984
复制相关文章
相似问题