두 개의 텍스트 상자를 연속으로 결합하는 방법

Question

4 개의 div와 하나의 기본 div가 있습니다. 각 div가 새 줄에오고 있습니다. 최대 공간을 사용하기 위해 두 개의 div를 결합하려고합니다. 내 코드는 내가이 결합 할 수있는 방법

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){ 
$(function() { 
    $("#tabs").tabs(); 
    $('#maindiv > div ').each(function(){ 
     $(this).attr('style','padding-bottom: 10px;'); 
    }); 
    $('#maindiv > div > b').each(function(){ 
     $(this).attr('style','width: 80px; display: inline-block;'); 
    }); 
}); 
});//]]> 

</script> 

    <div id="maindiv"> 
     <div> 
      <b>Name:</b> 
      <input type="text" name="name" value=""/> 
     </div> 
     <div> 
      <b>Age:</b> 
      <input type="text" name="age" value=""/> 
     </div> 
     <div> 
      <b>Email:</b> 
      <input type="text" name="email" value=""/> 
     </div> 
     <div> 
      <b>Phone:</b> 
      <input type="text" name="phone" value=""/> 
     </div> 
     <div> 
      <b>City:</b> 
      <input type="text" name="city" value=""/> 
     </div> 
     <div> 
      <input type="submit" name="submit" value="submit"/> 
     </div> 
    </div> 

당신은 http://jsfiddle.net/CG6Vw/1/ 에서 내 코드를 볼 수있다? 이 행의 전체 공간을 차지하므로

Answer 1

display:inline-block

사업부는 기본 블록 요소입니다 추가, 그것은 inline-block 또는 inline 그것에서 사용할 수있는 내용에 따라 폭을 제한 할 수 있습니다.

#maindiv > div { 
    padding-bottom: 10px; 
    display:inline-block 
} 

DEMO