フォームのインライン入力とブロック入力

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

最初の2つの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; 
}