如何使用列表顯示水平表單提交按鈕

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

我希望兩個按鈕水平顯示。我正在嘗試使用列表而不是表格。我應該怎麼做才能使按鈕顯示在同一行上，但作爲兩種形式的提交按鈕。如何使用列表顯示水平表單提交按鈕

來源

2011-03-21 Shorn Jacob

該HTML無效。列表項不能是表單的子項。（而且你似乎遭受列表，並不是每件事都需要在列表中） – Quentin 2011-03-21 15:52:58

該代碼段有很多錯誤：無效的HTML。內聯樣式（糟糕的做法，除非用於提問 - 我在這種情況下對此表示懷疑）。太多'ul'和'li'。你爲什麼要製作一個單獨的'form'來包含一個Reset按鈕？ – thirtydot 2011-03-21 15:55:57

您可以在jsfiddle

來源

2011-03-21 15:53:30 Haza

如果我正確地要對第一線和上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行。

來源

2011-03-21 15:54:31 Czechnology

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

來源

2011-03-21 16:04:30

如何使用列表顯示水平表單提交按鈕

回答

相關問題