HTML表单包装错误，浮点数可能有问题？

Question

我正在尝试制作这种形式：

这就是我得到的：

（我更改了按钮颜色，我知道=））

这是我的HTML：

 <form method="post" action="">
      <input type="text" id="email" name="email" value="Email" />
      <input type="submit" value="Keep me notified" id="submitButton"
 </form>

这是我的CSS：

form{
    width:350px;
    margin: 20px auto;
    display:block;
}
input[type=text]{
      display:inline-block;
      font-family: 'PT Serif Caption', serif;
      border:1px solid #CCCBC2;
      display:inline;
      font-size:14px;
      width:300px;
      line-height: 16px;
      padding: 9px 10px;
      height: 18px; 
      margin:0;
      margin-bottom: 5px;
      outline: 0;
      vertical-align: middle;
      width: 269px;
      float:left;

      -webkit-font-smoothing: antialiased;  
      -webkit-border-radius:3px;
      -moz-border-radius:3px;
      -o-border-radius:3px;
      -ms-border-radius:3px;
      border-radius:3px;
}
input[type=submit] {
  display: inline-block;    
  background:none;
  padding:0 14px;
  height: 36px;
  margin: 1px 0 0 15px;
  text-align: center;
  font-size: 15px;
  overflow: visible;
  color: white;
  background-color: #2459a9;
  border:none;
  font-family: 'PT Serif Caption', serif;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;

  -webkit-font-smoothing: antialiased;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  -o-border-radius:3px;
  -ms-border-radius:3px;
   border-radius:3px;

}

我的问：

• 如何让花车正确？还是别的什么？

• 你能用html5做吗？很酷，告诉我=）

• 如何在输入框中实现占位符

• 如何在按钮中输入大字？

Answer 1

Demo

您的表单规则使表单太小，导致按钮换行。请改用此规则：

form {
    width: 440px;
    margin: 20px auto;
    display: block;
}

编辑：

这应该有效：

form {
    width: 440px;
    margin: 20px auto;
    display: inline;
}

Demo

Answer 2

两件事：

1. 表单对于输入的总宽度来说太窄了。因此对于the fiddle you provided，它应该是464px。

2. 在表单上使用white-space: nowrap;。

See it at jsFiddle.