Inline & Block Form Входы вместе

Question

Я пытаюсь дать свою форму макету, как показано на этом изображении http://reversl.net/demo/, где входы первого имени и фамилии являются встроенными, но все остальные входы сложены (то есть друг на друга). В настоящее время у меня есть что-то вроде этого http://reversl.net/form/, используя следующую разметку;

<div class="container"> 
    <form> 
<ol>    
    <li> 
    <label for=name>Firstname:</label> 
    <input id=name name=name type=text placeholder="Jon" required autofocus> 
    </li> 

    <li> 
    <label for=name>Surname:</label> 
    <input id=surname name=surname type=text placeholder="Doe" required autofocus> 
    </li> 

    <li> 
    <label for=message>Message:</label> 
    <textarea id=message name=message placeholder="Type your message here..." required></textarea> 
    </li> 

</ol> 
    </form> 
</div> 

Стилировано следующим образом;

label { 
display: block; 
line-height: 1.75em; 
} 

input, textarea { 
width: 250px; 
display: inline-block; 
margin-bottom: 2em; 
padding: .75em .5em; 
color: #999; 
border: 1px solid #e9e9e9; 
outline: none; 
} 

input:focus, textarea:focus { 
-moz-box-shadow: inset 0 0 3px #aaa; 
-webkit-box-shadow: inset 0 0 3px #aaa; 
box-shadow:   inset 0 0 3px #aaa; 
} 

textarea { 
height: 100px; 
} 

Answer 1

Дайте первые два LI display: inline-block и при необходимости отрегулируйте прокладки/поля.

Answer 2

Я делаю это

HTML

<div class="container"> 
    <form> 
     <ul style="float: left"> 
      <label for="name">Firstname</label> 
      <input id="name" autofocus="" name="name" placeholder="Jon" required="" type="text"> 
     </ul> 
     <ul style="float: left"> 
      <label for="name">Surname</label> 
      <input id="surname" autofocus="" name="surname" placeholder="Doe" required="" type="text"> 
     </ul> 
     <br><br><br><br><br> 
     <ul> 
      <ul style="padding: 0px; margin: 0px"> 
       Message</ul> 
&nbsp;<textarea id="message" name="message" placeholder="Type your message here..." required="" style="width: 536px"></textarea> 
     </ul> 
    </form> 
</div> 

и CSS

label { 
    display: block; 
    line-height: 1.75em; 
} 
input, textarea { 
    width: 250px; 
    display: inline-block; 
    margin-bottom: 2em; 
    padding: .75em .5em; 
    color: #999; 
    border: 1px solid #e9e9e9; 
    outline: none; 
} 
input:focus, textarea:focus { 
    -moz-box-shadow: inset 0 0 3px #aaa; 
    -webkit-box-shadow: inset 0 0 3px #aaa; 
    box-shadow: inset 0 0 3px #aaa; 
} 
textarea { 
    height: 100px; 
} 
ul { 
    margin: 0px; 
}