CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to combine two text boxes in a row

I have 4 divs and one main div.Each div are coming on the new line.I want to join two divs together for using maximum space. My code is

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

You can see my code from http://jsfiddle.net/CG6Vw/1/ How can I combine this?

Upvotes: 2

Views: 2148

Answers (1)

Sowmya
Sowmya

Reputation: 26979

Add display:inline-block

Div is by default block element so it occupies the entire space of the row, make it inline-block or inline to restrict it to the width according to the content available in it.

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

DEMO

Upvotes: 3

Related Questions