Question

  <ul style="list-style-type:none;">
            <form name="frm1" action="" style="display:inline">
                <li>
                    <input type="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>

我希望水平显示两个按钮。我试图使用列表而不是表格。我该怎么做才能使按钮显示在同一行，而不是两个表单的提交按钮。

Answer 1

您可以在display:inline;

上使用li

jsfiddle上的演示

Answer 2

如果我理解你想要在第一行输入文本输入并在第二行输入两个按钮，这是一个想法 - 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;" />

请注意末尾的clear: both;换行符，以确保下一行真正显示在其自己的行上。

Answer 3

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

如此处所见jsFiddle

显然虽然这会对所有表单输入元素产生影响，但可以更新为包含css类。

如何使用列表显示水平表单提交按钮

3 个答案: