0

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

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

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

演示

为什么会发生这种情况?如何修复我的代码以在同一行中显示按钮?

4

9 回答 9

1

如果没有,请增加列大小auto并添加float:left到“导出器”

于 2013-10-11T08:57:31.237 回答
1

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

<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>
于 2013-10-11T09:13:40.810 回答
1

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

于 2013-10-11T09:14:34.217 回答
1

我个人会远离这种 css 方法,只是我的偏好意味着每个提交按钮都是完全相同的,但是如果您不希望每个提交按钮都使用这种样式怎么办。但话又说回来,该方法比在 HTML 文件中执行 css 好得多

input[type=submit]{


}

您最好为提交按钮提供一个名为 submit 的类,然后您可以选择要为哪些提交设置样式

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

.submit{
float: left;
etc. 
}

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

于 2013-10-11T09:14:48.953 回答
1

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

  • 增加表格/列的宽度似乎很自然,因为这两个按钮看起来太宽而无法适应。

  • 拥有它后,您可能更喜欢使用带有浮动组件的块显示之类的东西。

内联块在 Internet Explorer 浏览器中的性能很差,即使在 IE9 等最新版本中也是如此,并且您的很多访问者会在一段时间内使用它。

input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}
于 2013-10-11T09:00:34.847 回答
1

你可以这样尝试

为您的提交按钮定义一个 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
}
于 2013-10-11T09:03:15.103 回答
1

你可以试试这个造型;

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

您也可以尝试向左浮动。

于 2013-10-11T09:01:36.047 回答
1

这是一个例子..虽然使用引导程序

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>

注册或登录

于 2013-10-11T09:05:59.503 回答
0

试试这个 CSS

input[type=submit] {
    display: inline-block;
    float: left; 
    width: /*adjust as per your table */;
}
于 2015-03-13T12:15:01.600 回答