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

Posted 2023-03-05

【中文标题】使用 CSS HTML 垂直对齐提交按钮

【英文标题】：Vertical alignment of submit button using CSS HTML

【发布时间】：2011-08-30 06:32:23

【问题描述】：

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

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

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

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

【参考方案1】：

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

表单通常也是不一致的，您可能想尝试绝对定位提交按钮，在这种情况下给出#subscribe position：relative，并且提交按钮位置：absolute；右：0px；顶部：0px;

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

【讨论】：

哦，找萤火虫来帮助你在飞行中修补，看看发生了什么。 （如果你还没有使用它！） - getfirebug.com

【参考方案2】：

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

【参考方案3】：

在这个 css 规则中

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

改变

position:relative

到

position:absolute

应该做的伎俩。已在 IE 8 中测试并且可以正常工作。

【参考方案4】：

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

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

这就是我们的做法：

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

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

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