放大CSS中的缩小问题
[英]Zoom in Zoom out problems in CSS
问题描述
嗨，我在这里粘贴了我的页面代码，因为我只有一个背景图片。 在这一点上，我需要把按钮。 当我在进行放大和缩小时，按钮从位置移动。
<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>
1 个解决方案
解决方案1
0 已采纳 2012-09-07 07:33:12
看一下：
<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，将左右边距设置为'auto'（增长至填充）
之后，我除去填充左的上<form>元素
您可以在这里看到它的运行情况
放大和缩小html页面中的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.