使按钮和文本框的高度相同 [英] Making a button and textbox the same height next to each other

问题描述

我试图覆盖两个表单元素的默认表单样式，以使文本框和按钮的高度相同，并且并排显示，因此它看起来像是一个元素。

I'm trying to override the default form styling for two form elements so that the text box and button are both the same height and are side by side so that it looks like they are one element.

在某些浏览器中，它看起来不错，但在某些浏览器中，它们是垂直像素或两个像素。
这里是一个jsfiddle演示。 OS X上的Opera和Firefox都有问题。

In some browsers it looks fine but in some they are a pixel or two off vertically. Here is a jsfiddle demo. Opera and Firefox on OS X are giving me issues.

http://jsfiddle.net/QS3ec/6/

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
    background-color: #fafafa;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: #6f6f6f;
}
input[type="submit"] {
    background-color: #fafafa;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: #6f6f6f;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}

<div style="background-color:black; padding:20px;">
    <form>
        <input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
   --><input type="submit" id="subscribe-button" value="subscribe">
    </form>
</div>

推荐答案

一个简单的解决方法是修改以下CSS规则：

One simple fix is to modify the following CSS rule:

#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}

添加 vertical-align：top 负责基线对齐。

查看演示： http： //jsfiddle.net/audetwebdesign/EmAnr/

脚注：

要在按钮元素上添加左边框，请记住添加边框样式
，可以按如下方式进行：

To add the left border on the button element, remember to add the border styling, which can be done as follows:

#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}

这篇关于使按钮和文本框的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！