放大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.