0

何らかの理由で、ブラウザのスケーリングに非常に苦労しています。ここに私のジレンマがあります：

次のコードで表されるトップバーがあります。

    .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つだけを下に移動しようとしているため機能しません。

提案をありがとう。

4

1 に答える 1

0

ロゴで絶対位置を使用しているため、ログイン時の display: inline は何もしていません。ログインに位置を指定してから、選択した位置のタイプに応じて top: または margin-top: を使用する必要があると思います。

于 2012-07-13T19:22:35.683 に答える