0

こんにちはここに私は1つの背景画像を持っていたという点で私のページのコードを貼り付けています。その中で私はボタンを置く必要があります。ズームインとズームアウトのボタンが所定の位置から移動しています。

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

1 に答える 1

0

これを見てください：

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

何が起きてる：

.logindivに（100px）を指定して、幅が100pxの入力を保持するように設定しました。

次にmargin:0 auto、次の読み取りを適用しました。上下のマージンを0に設定し、左右を「自動」（成長から塗りつぶし）に設定します。

その後、<form>要素に残っているパディングを削除しました

ここで実際に動作しているのを見ることができます

于 2012-09-07T07:33:12.097 に答える