How to Display horizonatal form submit buttons using lists

  <ul style="list-style-type:none;">
            <form name="frm1" action="" style="display:inline">
                <li>
                    <input ty开发者_如何学运维pe="text" name="xxx">
                </li>
                <li>

                    <input type="submit" name="btn_submit" value="Submit">

                </li>
            </form>

            <li>
                <form name="frm2" action="" style="display:inline" >
                    <input type="submit" name="btn_reset" value="Reset">
                </form>
            </li>
  </ul>

I want the two buttons to be displayed horizontally. i am trying to use lists rather than tables. What should i do to make the buttons displayed on the same line but as submit buttons of two forms.

You can use display:inline; on li

Demo on jsfiddle

If I understand correctly that you want to have the text input on the first line and the two buttons on the seccond line, here's an idea - float:

<div>
  <form name="frm1" action="">
    <input type="text" name="xxx"><br />
    <input type="submit" name="btn_submit" value="Submit" style="float: left;">
  </form>
  <form name="frm2" action="">
    <input type="submit" name="btn_reset" value="Reset" style="float: left;">
  </form>
</div>
<br style="clear: both;" />

Note the line break with clear: both; at the end which makes sure that the next line will be really displayed on it's own line.

<form name="frm1" action="">
    <input type="text" name="xxx">       
    <input type="submit" name="btn_submit" value="Submit">     
</form>   
<form name="frm2" action="">
    <input type="submit" name="btn_reset" value="Reset">
</form>

CSS

form, form input{
    float: left;
}

As seen here jsFiddle

Obviously though this would have an effect on all form-input elements, but can be updated to include css classes.