让 div 在另一个 div 右侧浮动的问题

Question

我试图让我的 registerbutton div 浮动在 div 的右侧 - 登录按钮。我认为我不能将登录 div 包装在注册 div 周围以使其成为父级，因为我在 signinbutton 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 中使用 span

演示

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;
}

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

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

这是我的解决方案。

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

 <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