0

このメール購読フォームの入力ボタンは、Firefoxでページを開いたときに入力フィールドと正しく配置されていますが、Chromeでは少し外れています。

Chromeで正しく整列させる方法を誰かが教えてくれませんか？どうもありがとう！

htmlコード：

<div id="socialmedia">

    <form action="********/account.php" name="digiSHOP" method="post">

        <input type="hidden" name="m" value="subscribe" />

        <input type="hidden" name="submit" value="true" />

        <input type="hidden" name="secret" value="a6887a2c4d7909f10a4e01778cdd4b02" />

        <input type="hidden" name="mailingListId" value="1" />

        <div class="form-label" >
            <div class="nicelabel" >
                <img border="0" src="updateme.gif" width="132" height="30"></a>
            </div>
            <div class="niceform" >
                <input align="left" type="text" value=" your email" name="email" style="width:150px; height:24px; maxlength="80" value="" size="20" />
                <input class="edit-button" type="submit" value="" />
            </div>
        </div>
    </form>
</div>

CSSスタイル：

#socialmedia{
    float: left;
    width: 350px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    text-align: left;
}

.form-label {
    float: left;
    width: 400px; height: 28px;
    font-size: 1.5em;
    margin: 10px 0 0 0;
    text-align: left;
}

.nicelabel { float: left; text-align:left; width:132px; }

.niceform { float: left; text-align:right; width:230px; }

input, textarea {margin-left: 0px; }

スクリーンショット：

スクリーンショット

4

2 に答える 2

1

このような不一致は、さまざまなブラウザー間で存在します。この問題に対処するには、次の 2 つの方法があります。

  • 絶対位置の使用

    HTML

    <form class="contact-form">
    email id <input type="text"/><input type="submit" value="submit" />
</form>

    CSS

    form.contact-form{
    position:relative;
}

form.contact-form input[type=text]{
    position:aboslute;
    top:0;
}

form.contact-form input[type=submit]{
    position:absolute;
    top:0;
}

    この方法により、フォームの要素が一番上に押し出され、整列が保証されます。js フィドルはこちら -> http://jsfiddle.net/xcpSg/

  • テーブルの使用 テーブル
    でも同じことができます。Facebook は、ホームページの上部にあるログインフォームにこの方法を使用しています。

    • 于 2012-09-23T04:40:51.547 に答える
    0

    これはおそらくコード自体の小さなエラーです

    <img border="0" src="updateme.gif" width="132" height="30"></a>

    ここでは、どこにもclosing anchor tagせずに与えており、以下のようにタグを閉じていません。<a>img

    <img border="0" src="updateme.gif" width="132" height="30"/>

    これらを修正して確認してください。

    于 2012-09-23T04:39:33.493 に答える