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

Две вещи:

1. Форма слишком узкая для общей ширины входов. Таким образом, для скрипта, которую вы предоставили , она должна быть 464px.

2. Используйте white-space: nowrap; в форме.

См. На jsFiddle.

Answer 2

Демо

Ваше правило формы делает форму слишком маленькой, из-за чего кнопка переносится на новую строку.Попробуйте это правило вместо:

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

РЕДАКТИРОВАТЬ:

Это должно работать:

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

Демо