Question

嗨，我在这里粘贴我的页面代码，因为我有一张背景图片。在那我需要放按钮。当我进行放大和缩小时，按钮正从位置移动。

<html>
<head>
    <style type="text/css">
        body
        {   
            background:SteelBlue url('BG_BLUE_NEW.jpg') no-repeat center center;
        }
        .login
        {
            margin-top:300px;
            height:300px
        }
    </style>
</head>
<body>
    <div class="container">
    <div class="login">
        <form style="padding-left:370px;margin-bottom:0px;">
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
        </form>
    </div>
    </div>
</body>
</html>

Answer 1

看看这个：

<html>
<head>
    <style type="text/css">
        body
        {   
            background:SteelBlue url('BG_BLUE_NEW.jpg') no-repeat center center;
        }
        .login
        {
            width:100px; /*<- important edit*/
            margin: 0 auto; /*<- important edit*/
            margin-top:300px;
            height:300px
        }
    </style>
</head>
<body>
    <div class="container">
    <div class="login">
        <form style="margin-bottom:0px;"><!-- removed padding -->
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
            <INPUT TYPE="button" style="background-color:SteelBlue;width:100px;height:30px;font-size:150%;margin-bottom:10px" VALUE="Submit" onClick="window.open('http://www.google.com','_blank');"><br>
        </form>
    </div>
    </div>
</body>
</html>

这里发生了什么：

我在.login div上设置了一个指定的（100px）来保存宽度为100px的输入。

然后我应用了margin:0 auto，其内容为：将上下边距设置为0，左右设置为“自动”（增长到填充）

之后我删除了<form>元素

上的填充左侧

您可以在行动here

中看到它

放大缩小CSS中的问题

1 个答案: