Html 在同一行中显示按钮

Html 在同一行中显示按钮,html,css,Html,Css,我有一个web应用程序,在其中的表中有两个提交按钮 <input type="submit" value="Modifier" name="btn" style="display:inline" /> <input type="submit" value="Exporter" name="btn" style="margi

我有一个web应用程序,在其中的表中有两个提交按钮

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

我希望它显示在同一行中,但我有以下结果:


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

如果不是
auto
则增加列大小,并将
float:left
添加到“Exporter”

虽然可以增加表列的宽度或使用
显示:内联块,但可能需要执行其他操作:

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

  • 一旦有了它,您可能会更喜欢使用类似于块显示的东西和浮点组件

内联块在InternetExplorer浏览器中的性能很差,即使是在IE9这样的最新版本中也是如此,很多访问者都会使用它一段时间

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

你可以试试这种款式

input[type="submit"] {
    float: right
}
您也可以尝试向左浮动。

您可以这样尝试

为提交按钮定义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
}

下面是一个例子。。但是使用引导程序


注册
或
登录
注册 或 登录
在表格行中的列中,使用按钮尝试以下代码

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


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

我个人不想使用这种css方法,只是我的偏好这将意味着每个提交按钮都完全相同,但如果您不希望每个提交按钮都使用这种样式,该怎么办。但同样,这种方法比在HTML文件中使用css要好得多

input[type=submit]{


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

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

.submit{
float: left;
etc. 
}

.提交{
浮动:左;
等
}
主要的问题是,表列宽可能会为它们提供一个类,并在外部css文件中为它们提供满足您需要的宽度和/或高度。

试试这个css

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

增加表格列的大小或在div中换行可能更好地使用
display:inline块太多。增加列的大小。。。如果这不起作用,请尝试内联块或在列中左浮动一个和右浮动一个。在jsfiddle.netw上向我们展示一个演示您可能应该做的是通过删除不必要的填充来减少其他列的宽度。或者,如果包含按钮的列有宽度设置,则可能删除宽度设置。发布的代码远远不够:它缺少所有的表标记以及相关的CSS代码。解释一下如何做?已获得批准的答案@JukkaK.Korpela他需要的代码也在CSS中?放下你的架子,批准一个没有解决问题的答案,要么是一个错误,要么表明你想问的问题不是被问的问题。这个问题很模糊,但是如果元素不适合作为内联元素,浮动并不能使它们适合同一个单元格。或者事实上,我解决了这个问题和他不知道的另一个问题@显然,他也需要把列宽加宽。你怎么能因为鼓吹好的编程实践而贬低某人呢?谁说这是我的一部分?他回答了他的问题,并警告他其他方法的失败。你把网页塞满了,没有任何评论,把人记下来,这简直是恶作剧。我建议你建立一个新的类,这样就不会影响网站上的每个提交按钮。此外,如果文本扩展超过按钮宽度,设置按钮宽度会导致进一步的问题。我不建议不要使用类。我符合op提供的代码:)但你的两个建议都是对的:)
input[type=submit] {
    display: inline-block;
    float: left; 
    width: /*adjust as per your table */;
}