让 div 浮动到另一个 div 右边的问题

Question

我正在尝试让我的注册按钮 div 浮动在 div - 登录按钮的右侧。我不认为我可以将登录 div 包裹在寄存器 div 周围以使其成为父项，因为我在登录按钮 div 下弹出了代码。我尝试制作一个jsfiddle，但效果并不相同。要查看真实视图，我的网站是 sundayfundayleague.com .

我需要让注册按钮与登录按钮一致。

HTML

<div class="signinbutton"> 
    <a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div class="registerbutton">
    <a href="register.php">Register</a>
</div>

CSS

.signinbutton {
   padding: 10px;
    font-size: 2.5em;
    margin-top: 325px;
    margin-left: 30%;
}
.registerbutton {
    padding: 10px;
    font-size: 2.5em;
    margin-right: 30%;
    float: right;
}

Answer 1

首先。尝试减小图片尺寸。这个太大了。我需要时间来加载页面。

这是我的解决方案。

我会在这两个之外添加包装器。

 <div class="wrapper">  
    <div class="signinbutton"> 
        <a class="signin" href="javascript:void(0)">Sign In</a>
    </div>
    <div id="light" class="signInpopup">
        <a class="close" href="javascript:void(0)">Close</a>

        <form id="signInform" name="Sign In" action="" method="POST" autocomplete="on" accept-charset="utf-8">
            <div class="center">

                <input type="text" name="username" id="signInInput" placeholder="Username" autocomplete="on" required="">
                <br>
                <input type="password" name="password" id="signInPasswordInput" placeholder="Password" autocomplete="off" required="">
                <br>
                <br>
                <br>
                <label for="remember">
                <input type="checkbox" name="remember" id="remember">Remember me</label>
                <input type="hidden" name="token" value="687d55402565d69c55ab41c51eba5d76">
                <label for="widebutton">
                    <input id="widebutton" type="submit" value="Sign In">
                </label>
                <br>
                <br>
            </div>
        </form>
    </div>
    <div id="fade" class="black_overlay"></div>

    <div class="registerbutton">
         <a href="register.php">Register</a>
    </div>
</div>

并将此 css 添加到包装器中：

.wrapper{
   display: inline-block;
   width: 100%;
   margin-top: 50px;
}

从您的#registerbutton

中删除它

 float:right

并从您的 .signinbutton 中删除

 margin-top:352px;

并添加 .signinbutton

 float:left

Answer 2

翻转 HTML 代码中的 div 并使用 float: left;属性代替。我认为向右浮动往往有点棘手，而向左浮动则更顺从。这样做你可能会更幸运。

<div class="registerbutton">
<a href="register.php">Register</a>
</div>
<div class="signinbutton"> 
<a class="signin" href="javascript:void(0)">Sign In</a>
</div>

CSS

.registerbutton {
padding: 10px;
font-size: 2.5em;
margin-right: 30%;
}

.signinbutton {
padding: 10px;
font-size: 2.5em;
margin-top: 325px;
margin-left: 30%;
float: left;
}

Answer 3

你可以在 1st 内使用 span div

演示

https://jsfiddle.net/knkvksdz/

Html

<div class="signinbutton"> <a class="signin" href="javascript:void(0)">Sign In</a>

<span class="registerbutton">
    <a href="register.php">Register</a>
</span>

</div>

Css

.signinbutton {
    font-size: 2.5em;
    margin-top: 325px;
    margin-left: 30%;
}
.registerbutton {
    float: right;
}

让 div 浮动到另一个 div 右边的问题

Issues getting div to float right of another div

html

css

position

css-position