在同一行显示按钮

Question

我有一个Web应用程序，其中我在表格中有这两个提交按钮

   <input type="submit" value="Modifier" name="btn" style="display:inline" />
 <input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />

我希望它显示在同一行，但我有这个结果：

为什么会这样？如何修复我的代码以显示同一行中的按钮？

Answer 1

如果不是auto，请增加列数，并将float:left添加到“导出程序”

Answer 2

虽然您可以增加表格列的宽度或使用display: inline-block，但也许您想要做其他事情：

• 增加表格/列宽似乎很自然，因为这两个按钮看起来太宽而不适合。

• 一旦你拥有它，你可能更喜欢使用带有浮动组件的块显示。

内联块在Internet Explorer浏览器中执行 ，即使在IE9等最新版本中也是如此，很多访问者都会在一段时间内使用它。

input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}

Answer 3

你可以尝试这种造型;

input[type="submit"] {
    float: right
}

你也可以尝试向左浮动。

Answer 4

您可以尝试这样

为提交按钮定义css规则

input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}

Answer 5

这是一个例子..虽然使用bootstrap

http://jsfiddle.net/QYBHm/

<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>

    注册     要么     登入

Answer 6

在带有按钮的列中的表行中尝试此代码

<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
 <input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>

Answer 7

我会说容器列不够宽，所以即使它们也是内联的，它们看起来像这样。尝试更改该列的宽度以检查是否存在问题。

Answer 8

我个人会远离这种css方法，只是我的偏好这意味着每个提交按钮都完全相同，但如果你不希望这个样式与每个提交按钮。但是再一次，这种方法比在HTML文件中执行css要好得多。

input[type=submit]{


}

你最好给提交按钮一个名为submit的类，然后你可以选择你要做的样式你正在设置的样式

<input type="submit" class="submit">

.submit{
float: left;
etc. 
}

主要问题是你的表格列宽可能会给它们一个类，并给它们一个宽度和/或高度，以满足你在外部css文件中的需要。

Answer 9

试试这个css

input[type=submit] {
    display: inline-block;
    float: left; 
    width: /*adjust as per your table */;
}