使用 CSS HTML 垂直对齐提交按钮

Vertical alignment of submit button using CSS HTML

提问by Joe

I am having trouble getting my submit button to display in line with my inputs in internet explorer. The alignment is fine in safari and firefox but IE is dropping the button down about 5px. Any ideas why this is happening or how i can fix it?

我无法根据我在 Internet Explorer 中的输入显示提交按钮。在 safari 和 firefox 中对齐很好，但 IE 将按钮下降了大约 5px。任何想法为什么会发生这种情况或我如何解决它？

The url is http://www.menslifestyles.comclick subscribe at the top of the page the form will pop in. The two inputs line up straight but in ie the submit button doesn't align!

网址是http://www.menslifestyles.com点击页面顶部的订阅，表单将弹出。两个输入排成直线，但提交按钮未对齐！

-------html-------

-------html-------

<div id="subscribe">
<form id="subscribeform" method="post" action="/maillists/subscribe" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>

<label for="MaillistName">Name</label><input name="data[Maillist][name]" type="text" maxlength="255" id="MaillistName">&nbsp;    &nbsp;
<label for="MaillistEmail">Email</label><input name="data[Maillist][email]" type="text" maxlength="500" id="MaillistEmail">
<input type="submit" value="Submit"><a href="#" id="closelink">X</a>
</form></div>

-----css-------

-----css-------

#subscribe{
    width:620px;
    position:absolute;
    top:25px;
    left:50%;
    margin-left:-120px;
    overflow: auto;
    z-index: 1000;
    background: #ffffff;
    color:#6e6e6e;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Helvetica, Verdana;
}
#subscribe input{
    border: 1px solid #e5e5e5;
    display: inline;
    height: 12px;
    color:#cccccc;
    width: 215px;
}  
#subscribe input[type="button"], #subscribe input[type="submit"]{
    clear:both;
    padding:3px, 0px;
    -webkit-appearance: none;
    font-family: Helvetica, Verdana;
    background-color:#cccccc;
    text-align:center;
    color: #3c3c3c;
    font-size:10px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: inline;
    height:15px;
    width:60px;
    position:relative;
    margin-left:5px;
}
#subscribe form{
    margin:0px;
    padding:0px;
}
#subscribe label{
    display: inline;
    font-size: 10px;
}
#subscribe a{
    text-decoration: none;
    color: #cccccc;
}
#subscribe #closelink{
    padding:0 5px;
}

回答by Sotiris

In your css for #subscribe input[type="button"], #subscribe input[type="submit"]try to add vertical-align: top;

在你的 css 中#subscribe input[type="button"], #subscribe input[type="submit"]尝试添加vertical-align: top;

回答by addedlovely

You should set padding and margin explicitly, some browsers have different defaults which will mess things up. So margin-left:5px; becomes margin: 0 0 0 3px;

您应该明确设置填充和边距，某些浏览器具有不同的默认值，这会造成混乱。所以 margin-left:5px; 变成边距：0 0 0 3px；

Forms are also just inconsistent generally, you may want to try and absolutely positioning the submit button, in which case give #subscribe position:relative, and the submit button position:absolute; right:0px; top:0px;

表单也只是普遍不一致，你可能想尝试绝对定位提交按钮，在这种情况下给#subscribe position:relative，提交按钮位置：absolute; 右：0px; 顶部：0px;

In the future you can get around default browser values, and get a more consistent look by setting default values in your stylesheet , see herefor a reset stylesheet that you can include. (If you include this now it might throw a few things out)

将来，您可以绕过默认浏览器值，并通过在样式表中设置默认值来获得更一致的外观，请参阅此处以获取可以包含的重置样式表。（如果你现在包含它，它可能会抛出一些东西）

回答by Jason Gennaro

In this css rule

在这个css规则中

#subscribe input[type="button"], #subscribe input[type="submit"]

#subscribe input[type="button"], #subscribe input[type="submit"]

Change

改变

position:relative

position:relative

to

到

position:absolute

position:absolute

Should do the trick. Tested in IE 8 and works.

应该做的伎俩。在 IE 8 中测试并有效。

回答by Adrien Be

Submit button seem to have different default margin and padding values in different browsers.

提交按钮在不同的浏览器中似乎有不同的默认边距和填充值。

I assume this must be in some reset Stylesheetas this is not the only annoying cross browser "default" values discrepancy. When is the web going to standardize this is another subject.

我认为这必须在某些重置样式表中，因为这不是唯一令人讨厌的跨浏览器“默认”值差异。网络何时标准化，这是另一个主题。

This is how we do it:

这是我们的做法：

#searchForm {
    position: relative;   // you must keep this
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchBtn{
    padding: 0;    // you must keep this
    margin: 0;     // you must keep this
    position: absolute;    // you must keep this
    left: 203px;  // you can change this
    top: 2px;
    height: 24px;
    width: 42px;   // you can change this
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
}


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
    <input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>

I noticed very small discrepancies between IE8, Firefox and GChrome but there may be in other browsers.

我注意到 IE8、Firefox 和 GChrome 之间的差异很小，但在其他浏览器中可能存在差异。

The form here has its position set to "relative" so that when I set the button's position to absolute, the button position itself relatively to the searchForm.

此处的表单将其位置设置为“相对”，因此当我将按钮的位置设置为绝对位置时，按钮位置本身相对于 searchForm。