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中做到吗？酷，告诉我=）

• 如何实现一个InputBox中的占位符

• 我如何在按钮大信？

Answer 1

两件事情：

1. 形式是太窄t输入的总宽度。因此对于the fiddle you provided，它应该是464px。

2. 在窗体上使用white-space: nowrap;。

See it at jsFiddle.

Answer 2

Demo

你的形式规则使表格太小，导致按钮来包装一个新行。试试这个规则来代替：

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

编辑：

这应该工作：

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

Demo