何らかの理由で、ブラウザのスケーリングに非常に苦労しています。ここに私のジレンマがあります:
次のコードで表されるトップバーがあります。
.topbar {
position: absolute;
background: #232121;
min-width: 800px;
height: 111px;
top:0;
left: 0;
right: 0;
margin: 0 auto;
}
そのトップバー要素内には、a
属性の背景画像によって作成されたロゴがあります
#logo {
margin-top: 20px;
background: #232121 url("images/logo.png") no-repeat right top;
width:299px;
height: 76px;
display:inline-block;
text-indent: -99999px;
}
次に、その右側に小さなログイン フォームがあります。
.userLogin {
display: inline;
margin-left: 40px;
}
Links という div もあります...何に使っているかほとんど忘れてしまいました。
#links {
width: 100%;
text-align:center;
}
完全な HTML は次のとおりです。
<body>
<div class="topbar"><div id="links">
<a href="index.html" id="logo">Logo</a>
<form action="index.html" method="POST" class="userLogin">
<input type="text" value="email">
<input type="password" value="password" />
<input type="submit" value="Sign In" id="signin" />
</form></div>
</div>
</body>
これでページの上部に要素が作成され、ブラウザの幅が調整されると適切にスケーリングされます。ただし、どちらの要素もフローティングしていないため、ログイン フォームをロゴに合わせて適切に配置することができません。両方の要素を互いに一定の距離にしたいのですが、それでもページの幅に合わせて拡大縮小したいと考えています。
両方の要素にパディングとマージンを追加しようとしました...しかし、両方とも1つになり、1つだけを下に移動しようとしているため機能しません。
提案をありがとう。