html - 内联放置两个表单元素

Question

我目前有 1 个表单，里面有 2 个元素(一个电子邮件输入和一个提交按钮)。这个表格对我来说是这样的: 但是我的一些同事似乎看起来像这样:

我的相关 HTML 如下所示:

<header>
<div class="wrap nopad">
<h1>Share and Listen to Music.</h1>
<form>
<input type="email" placeholder="Email address to get started"><input type="submit" value="Get Started">
</form>
</div>
</header>

相关的 CSS 如下所示:

body {
    background-color: #1B1B1E;
    color: #fff;
    margin:0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.wrap {
    width:685px;
    padding:0 15px;
    margin:0 auto;
    display: block;
}
.wrap.nopad {
    width:700px;
    padding: 0;
}
header {
    width:100%;
    padding:200px 0 100px;
    background-color: #2de6c0;
    display: block;
}
header .wrap h1 {
    color:#000;
    text-align: center;
    display: block;
    font-weight:bolder;
    text-transform: uppercase;
    font-size:45.4px;
    letter-spacing: 0px;
}
header .wrap h1 span {
    text-decoration: underline;
}
header form {
    padding:20px 0 0;
    width:660px;
    margin:0 auto;
}
input[type=email] {
    color:#000;
    padding:20px;
    display: inline-block;
    outline: 0;
    border: 0;
    width:470px;
    text-transform: uppercase;
    font-size:24px;
    font-weight: 500;
}
input[type=submit] {
    background-color: #000;
    color:#FFF;
    text-transform:uppercase;
    font-size:16px;
    padding:25px 20px;
    display: inline-block;
    font-weight:500;
    outline: 0;
    border: 0;
    cursor: pointer;
    float: right;
}

能否请您指出正确的方向，以便我可以修复我的代码以在所有浏览器中工作并内联。

谢谢!

Answer 1

Fiddle

 Reduce the padding of black submit button button.
 input[type=submit]
 {
   padding: 25px 16px;
 }

查看演示

Demo2

 It ll give you best design

 input email button --> Width:71.4%

 submit button  ---> Remove left and right padding and add width 22.54%