jqWidgets form alignment horizontally

How to make jqWidgets form to be with horizontal alignment? What I tried is:

<style>
input {
   display: inline-block;
}

What about that one: http://jsfiddle.net/dbZJL/

 $('#testForm').jqxValidator({
     rules: [

     {
         input: '#userInput',
         message: 'Username is required!',
         action: 'blur',
         rule: 'required'

     },

     {
         input: '#emailInput',
         message: 'Invalid e-mail!',
         action: 'blur',
         rule: 'email'

     }],
 });
 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 100,
     height: 30
 });
 $("#jqxbutton").click(function () {
     $('#testForm').jqxValidator('validate');
 });

<form id="testForm" action="./">Username:
    <input type="text" id="userInput" class="text-input" />E-mail:
    <input type="text" id="emailInput" class="text-input" />
    <input type="button" style="" id="jqxbutton" value="Submit" />
</form>

And by applying CSS margin, you can change the form's alignment. To change the alignment of the Form's content, you can put padding-left or padding-right. Example: http://jsfiddle.net/t76Jc/