Php HTML按钮在页面刷新时移动?
所以我在前几天注意到了这个bug,当页面刷新时,登录按钮将移动到另一个位置。然而,若页面是从链接加载的,那个么它将保持在正确的位置。我画了一个空白,为什么这会这样做,这里是链接和代码到我的网站 网站: HTML:Php HTML按钮在页面刷新时移动?,php,html,css,formatting,Php,Html,Css,Formatting,所以我在前几天注意到了这个bug,当页面刷新时,登录按钮将移动到另一个位置。然而,若页面是从链接加载的,那个么它将保持在正确的位置。我画了一个空白,为什么这会这样做,这里是链接和代码到我的网站 网站: HTML: <div class="login_box"> <li> <?php define('IN_PHPBB', true); $phpbb_root_path = (defined('PH
<div class="login_box">
<li>
<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './forums/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
$user->session_begin();
$auth->acl($user->data);
if (!$user->data["is_registered"]) {
?>
<div class="logged_out">
<form action="./forums/ucp.php?mode=login" method="post" enctype="multipart/form-data">
<input type="text" placeholder="username" style="height:20px;" maxlength="20" size="17px" name="username" />
<input type="password" placeholder="password" style="height:20px;" maxlength="50" size="16px" name="password" />
<div class="button">
<input type="image" name="login" value="Log in" src="images/login.png" width="28px" onmouseout="this.src='images/login.png'" onmouseover="this.src='images/loginhover.png'" onmouseout="t">
</div>
<div class="logged_out_txt">
<br>
<input type="checkbox" name="autologin" id="autologin" />
<font size="2" color="#BDBDBD">
Remember Me
<div class="forgot">
<font size="2">
<a href="forums/ucp.php?mode=sendpassword">Forgot Password?</a>
</font>
</div>
<div class="New">
<br>
<a href="forums/ucp.php?mode=register">New Member? Register Now!</a>
</div>
</div>
<input type="hidden" name="redirect" value="./../index.php" />
</form>
</div>
<?php
}
else {
echo "<div class='logged_in'>";
echo "<div class='welcome'>" . $user->data['username'];
"</div>";
echo "<br><div class='account'><a href=\"logout.php\">Logout</a></div>";
echo "<div class='account'><a href=\"forums/ucp.php?i=pm&folder=inbox\">Messages</a></div>";
echo "<div class='account'><a href=\"forums/ucp.php\">My Account</a></div>";
echo "</div>";
}
?>
</li>
</div>
.login_box {
float: right;
width: 330px;
height: 75px;
margin-top: 7px;
margin-right: -5px;
list-style: none;
}
.login_box li {
}
.login_box li a {
color: #BDBDBD;
text-decoration: none;
padding-left: 60px;
padding: 0px;
}
.logged_in {
background-image: url(images/bg_login2.png);
border: 3px solid#000000;
outline: 1px solid#BDBDBD;
width: 304px;
height: 55px;
margin-left: -2px;
padding-top: 5px;
}
.logged_out {
margin-right: 38px;
}
.logged_out_txt {
margin-top: -20px;
}
更新CSS类的以下更改,就可以了 CSS
.logged_out {
margin-right: 22px;
position: relative;
}
.button {
position: absolute;
top: 0;
right:0;
}
删除
显示:内联;浮动:对;边际上限:0;左边距:4px
来自。按钮
查看您的网站,我建议对CSS进行以下更改:
.button {
display: inline-block;
float: right;
}
.logged_out {
margin-right: 22px;
}
我不知道你说按钮在移动是什么意思,但我注意到页面创建了一个水平滚动条,因为你的内容在某些分辨率下超过了设备的宽度。我建议不要让这种情况发生。是的,我一直想解决这个问题,因为我在1920x1080屏幕上设计了这个页面。我一直在尝试对css进行某种自动缩放,您有什么建议?您希望它移动到哪里?只要将它移动到右侧5px,使其脱离表单框,您就可以随时更改
right
属性的值,将其移动到框内的任何位置。注销框。我尝试过,但是由于某种原因,它一直被锁在表单框上。你想把它放在你网站上现在的位置吗?谢谢,伙计,刚刚调整了上边距,它就像一个魔咒一样工作!但这不是正确的方法。只需点击按钮并返回主页,您将再次看到按钮移动。我认为您不需要页边空白顶部:-26px;默认值为0时,它向下移动,看。好的,我明白了,给我一点时间,我想我找到了一个解决方案。