HTML 表单包装不正确，可能是 float 有问题？

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;

}

我的问题:

• 如何让 float 正确？还是别的原因？

• 你能用 html5 做吗？酷，给我看看 =)

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

• 如何在按钮中显示大字母？

Answer 1

两件事:

1. 表单对于输入的总宽度来说太窄了。所以对于 the fiddle you provided , 应该是 464px。

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

See it at jsFiddle.