인라인 및 블록 입력 입력

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; 
}