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

不同的浏览器之间存在这样的不一致。有两种方法可以解决此问题：

  • 使用绝对定位

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