Question

我试图让我的registerbutton div浮动div - signinbutton。我不认为我可以在注册div周围包含signin 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 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

你可以在第一个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;
}

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

3 个答案: