Question

出于某种原因，我在浏览器缩放方面遇到了巨大的困难。这是我的困境：

我有一个顶栏，由以下代码表示：

    .topbar {
        position: absolute;
        background: #232121;
        min-width: 800px;
        height: 111px;
        top:0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

在该topbar元素中，我有一个徽标，由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>

现在，这会在页面顶部创建元素，并在浏览器宽度调整时正确缩放。但是，由于这两个元素都没有浮动，我无法正确调低登录表单以与徽标对齐。我希望两个元素彼此之间保持固定的距离，但是我希望它们仍然按照页面的宽度进行缩放。

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

感谢您的任何建议。

Answer 1

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

问题保持内联缩放元素

1 个答案: