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

问题描述：

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

我希望两个按钮水平显示。我正在尝试使用列表而不是表格。我应该怎么做才能使按钮显示在同一行上，但作为两种形式的提交按钮。如何使用列表显示水平表单提交按钮

该HTML无效。列表项不能是表单的子项。（而且你似乎遭受列表，并不是每件事都需要在列表中） – Quentin 2011-03-21 15:52:58

该代码段有很多错误：无效的HTML。内联样式（糟糕的做法，除非用于提问 - 我在这种情况下对此表示怀疑）。太多'ul'和'li'。你为什么要制作一个单独的'form'来包含一个Reset按钮？ – thirtydot 2011-03-21 15:55:57

答

您可以在jsfiddle

答

如果我正确地要对第一线和上seccond线两个按钮上的文本输入理解上li

演示使用display:inline;，这里有一个想法 - 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;线路中断，这使得确保下一行会真的显示在它的流n行。

答

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

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

相关推荐