ヘッダーの右側にあるログインボックス

Question

私は、ページの右上にある私のヘッダーの右側にログインボックスを置くことに苦労しています。私はヘッダーと青のすべてが青のページの残りの部分を白のままで、右上のログインボックスでお互いに隣り合っていることを望みます。 .leftタグと.right divタグを使用している私のCSSを通して、私はそれを達成することができませんでした。

* { 
 
    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>

Answer 1

idセレクタの代わりにhtmlでクラスセレクタを使用していたため、html snd cssをリファクタリングしました。

* { 
 
    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

Answer 2

ちょうどあなたのヘッダークラ​​スにこれを追加します。display:inline-flex

ので、このようにそれを変更します。

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

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

Answer 3

あなたのコードは、まあちょうどあなたがいくつか間違っています：

1）あなたは、タグHTMLでIDを使用しますが、CSSで.セレクタを使用しています。

2）あなたはmargin-left: 2200px;を#rightにする必要はありません。

3）overflow: auto;を.headerに使用してください。

4）#leftと#rightでbox-sizing: border-box;を使用してください。

私は、私はあなたが助けを願って、

完全なコードそれらを修正：

* { 
 
    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>