標題右側的登錄框

我一直在努力讓我的登錄框位於頁面右上角附近的標題右側。我希望標題和藍色的所有內容都相鄰，右上角的登錄框仍然是藍色，其餘的頁面都是白色的。通過我的CSS使用.left和.right div標籤，我無法完成。標題右側的登錄框

* { 
 
    color: #000000; 
 
} 
 

 
body { 
 
    margin: 0px 150px 0px 150px; 
 
    color: #ffffff; 
 
} 
 

 
div.header { 
 
    background-color: #b3d9ff; 
 
    width: 100%; 
 
    margin: 10px auto 10px auto; 
 
} 
 

 
div.page { 
 
    color: #e6f2ff; 
 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
.left { 
 
    width: 200px; 
 
    float: left; 
 
} 
 

 
.right { 
 
    margin-left: 2200px; 
 
}

<div id="page"> 
 
    <div class="header"> 
 
    <div id="left"> 
 
     <h1>Welcome to the best blog in the world!</h1> 
 
     <h6>I know you're jealous...</h6> 
 
    </div> 
 

 
    <div id="right"> 
 
     <fieldset> 
 
     <legend> 
 
      <h4>Already a member? Login here:</h4> 
 
     </legend> 
 

 
     <form method="GET" action="http://csis.svsu.edu/~cmdewey/thankyou.html"> 
 
      Login name: 
 
      <input type="text" id="uname" name="uname"><br><br> Password: 
 
      <input type="password" id="secretpass" name="secretpass"><br><br> 
 
      <input type="submit" value="Submit"> 
 
     </form> 
 
     </fieldset> 
 
    </div> 
 
    </div>

來源

2017-06-01 Devin

我重構了html snd css，因爲您在html中使用類選擇器而不是id選擇器。

* { 
 
    color: #000000; 
 
} 
 
body { 
 
    color: #ffffff; 
 
} 
 
.header { 
 
    overflow: hidden; 
 
    background-color: #b3d9ff; 
 
    width: 100%; 
 
    margin: 10px auto 10px auto; 
 
} 
 
div.page { 
 
    color: #e6f2ff; 
 
} 
 
img { 
 
    padding: 10px; 
 
} 
 
.left { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.right { 
 
    width: 50%; 
 
    float: right; 
 
}

<div id="page"> 
 
<div class="header"> 
 
<div class="left"> 
 
<h1>Welcome to the best blog in the world!</h1> 
 
<h6>I know you're jealous...</h6></div> 
 

 
<div class="right"> 
 
<fieldset><legend> 
 
<h4>Already a member? Login here:</h4></legend> 
 

 
<form method="GET" action="http://csis.svsu.edu/~cmdewey/thankyou.html"> 
 
    Login name: 
 
<input type="text" id="uname" name="uname"><br><br> 
 
    Password: 
 
<input type="password" id="secretpass" name="secretpass"><br><br> 
 
<input type="submit" value="Submit"> 
 
</form></fieldset></div></div> 
 

 
enter image description here

來源

2017-06-01 02:46:43 itacode

這是完美的謝謝你！ – Devin

只需添加到您的頭類：display:inline-flex

所以改變這樣的：

div.header { 
    background-color: #b3d9ff; 
    width: 100%; 
    margin: 10px auto 10px auto; 
    display:inline-flex; 
}

https://jsfiddle.net/emilvr/rpqzvgwq/1/

來源

2017-06-01 02:40:27

謝謝右上？這將它放在標題旁邊，離開標題空間的後半部分。 – Devin

得到它的工作，謝謝！ – Devin

你的代碼是好，只是你有幾個錯誤：

1）您使用ID在標記HTML，但在CSS中使用.選擇。 2）你不需要margin-left: 2200px;在#right。

3）在.header中使用overflow: auto;。

4）使用box-sizing: border-box;在#left和#right。

我解決這些問題，我希望幫你，

全碼：奏效，現在我怎麼得到它對齊到

* { 
 
    color: #000000; 
 
} 
 

 
body { 
 
    color: #ffffff; 
 
} 
 

 
div.header { 
 
    background-color: #b3d9ff; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 

 
#page { 
 
    color: #e6f2ff; 
 

 
} 
 

 
img { 
 
    padding: 10px; 
 
} 
 

 
#left { 
 
    width: 50%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
#right{ 
 
width: 50%; 
 
float: right; 
 
box-sizing: border-box; 
 
}

<div id="page"> 
 
<div class="header"> 
 
<div id="left"> 
 
    <h1>Welcome to the best blog in the world!</h1> 
 
    <h6>I know you're jealous...</h6> 
 
</div> 
 
<div id="right"> 
 
     <fieldset> 
 
      <legend> 
 
       <h4>Already a member? Login here:</h4> 
 
       </legend> 
 
       <form method="GET" action="http://csis.svsu.edu/~cmdewey/thankyou.html"> 
 
        Login name: 
 
       <input type="text" id="uname" name="uname"><br><br> 
 
        Password: 
 
       <input type="password" id="secretpass" name="secretpass"><br><br> 
 
       <input type="submit" value="Submit"> 
 
       </form> 
 
     </fieldset> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-06-01 02:57:38 Ehsan

標題右側的登錄框

回答

相關問題