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>

现在这会在页面顶部创建元素，并且当浏览器宽度调整时它们会正确缩放。但是，由于这两个元素都不是浮动的，我无法正确关闭登录表单以与徽标对齐。我希望这两个元素彼此之间的距离是固定的，但我希望它们仍然随着页面的宽度而缩放。

我已经尝试为这两个元素添加填充和边距......但它们都作为一个元素，这是行不通的，因为我试图只向下移动一个元素。

感谢您的任何建议。

4

1 回答 1

0

登录时的 display: inline 没有做任何事情，因为您在徽标上使用了绝对定位。我认为你应该给登录一个位置，然后使用 top: 或 margin-top: 取决于你选择的位置类型。

于 2012-07-13T19:22:35.683 回答