gpt4 book ai didi

css - 放大缩小CSS中的问题

转载 作者:行者123 更新时间:2023-11-28 13:41:39 25 4
gpt4 key购买 nike

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

<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>

最佳答案

看看这个:

<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 上设置了一个指定的 (100px) div 来保存宽度也为 100px 的输入。

然后我申请了margin:0 auto上面写着:将上下边距设置为 0,将左右边距设置为“自动”(增长到填充)

之后,我删除了 <form> 上的 padding-left|元素

您可以在实际中看到它 here

关于css - 放大缩小CSS中的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12313679/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com