使两个表单并排显示

Question

这个不起作用

<form style ='display:inline;'>
 <input type = 'submit'/>
</form>
<form style ='display:inline;'>
  <input type = 'submit'/>
</form>

我希望有两个表单，分别提交到不同的脚本，并且每个表单都有一个输入按钮以行内形式显示。

我希望将其样式设置为行内，因为其他人将对主CSS文件进行更加永久的更改，我做错了什么吗？

- algorithmicCoder

Answer 1

我认为您想要的是将它们并排显示。您可以使用浮动（floats）来实现，具体做法如下：

<form style ='float: left; padding: 5px;'>
akjfhdkjahj<br />
 <input type = 'submit'/>
</form>
<form style ='float: left; padding: 5px;'>
  aklfjas<br />
  <input type = 'submit'/>
</form>

但即便如此也不是最理想的。最好的做法是将每个 < form > 包裹在 < div > 中，并在 div 标签中使用 float。

- checkenginelight

Answer 2

如果我理解问题正确的话，您可以使用display:inline-block;。

form{
    width:200px;           //JUST FOR SHOW
    height:200px;          //JUST FOR SHOW
    background:red;        //JUST FOR SHOW
    display:inline-block;  
    margin:1em;            
}

例子: http://jsfiddle.net/jasongennaro/dn5NQ/3/

显然，您需要重新设计表单的内容...正如您所说的那样。

- Jason Gennaro

---

在 Opera 中，将表单的 display 属性设置为 inline-block 会导致什么问题...这是个坏主意。 - Joe Half Face

这比float:left更好，因为它可以让你居中表单。 - alexan

Answer 3

只需使用 display:inline-block。例如：

<form style ='display:inline-block;'>
 <input type = 'submit'/>
</form>
<form style ='display:inline-block;'>
  <input type = 'submit'/>
</form>

您也可以使用HTML表格来强制执行此操作。例如:

<table>
  <tr>
     <td>
       <form>
         <input type="submit" />
       </form>
     </td>
     <td>
       <form>
         <input type="submit" />
       </form>
     </td>
  </tr>
</table>

- anazititís gnósis

Answer 4

一个用于显示内联的输入按钮。

如果要将按钮显示为内联，则需要将这些样式分配给输入元素，而不是表单元素。

- feeela

Answer 5

您应该使用引号"来定义属性，同时对按钮进行 inline 样式设置，因为默认情况下它们是以 block 方式定义的。

- François Feugeas