Javascript 如何将两个文本框合并成一行

我有4个div和一个main 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>  

//
姓名：
年龄：
电邮：
电话：
城市：

您可以从中查看我的代码

---

如何组合此功能？

添加

显示：内联块

默认情况下，Div是块元素，因此它会占用行的整个空间，将其设置为

inline block

或

inline

，以根据其中可用的内容将其限制为宽度

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

---

请使用CSS设置元素的样式。不是jquery。没有足够的空间将输入放到同一行。