讓div浮動到另一個div的問題

Question

我想讓我的registerbutton div浮動div - signinbutton的權利。我不認爲我可以將登錄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

您可以使用跨第一格內

演示

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

首先的。嘗試縮小圖片大小。這個太大了。我需要時間來加載頁面。

這是我的解決方案。

我會在這兩個外面添加包裝。

<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添加到包裝：從您的#registerbutton

float:right 

，並移除.signinbutton

margin-top:352px; 

，並添加

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

刪除這一點。登錄按鈕

float:left 

Answer 3

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