Question

I have a div and I want the elements inside the div to be placed horizontally .

here is my small code

<div>
    <g:Label>Legal Name </g:Label>
    <g:TextBox> </g:TextBox>
</div>

I have these 2 elements in my div , I want to place them in one row ,but I am getting a label then in the next row I am getting the textbox , Any idea how to make both in one line.

disply:inline works .. but

isn’t this possible ..?

            <div className="test">

    <g:Label>Legal Name </g:Label>
    <g:TextBox ui:field="txtLegalName"></g:TextBox>

    </div>

css:

   .test{
display:inline-block;

}

I actually want to reduce my code , don’t want to put this style to every widget of the Div, as there will be many elements coming into this div

Thanks

Answer 1

Define float or display:inline-block to it. Write like this:

label,input{display:inline-block}