Html 使表格单元格内的 2 个按钮彼此相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33828836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make 2 buttons inside a table cell be next to each other
提问by Ellone
I have the following code :
我有以下代码：
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
</button>
</td>
They appear on 2 different lines.
它们出现在 2 条不同的行上。
How can I make them appear next to each other on the same line ?
我怎样才能让它们在同一行上彼此相邻？
I tried a few things with floatand displaybut without success.
我尝试了一些事情float，并display但没有成功。
回答by Kenney
If I add that code in a snippet the buttons are next to each other, so it's hard to reproduce:
如果我在代码片段中添加该代码，则按钮彼此相邻，因此很难重现：
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-pencil-square-o"></i>Button1
</button>
<button class="btn btn-primary btn-xs" ng-click="r.changeView('requests/edit/' + request.id)">
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>Button2
</button>
</td>
</tr>
</table>The buttons are already displayed as inline-block.
Maybe the table isn't wide enough; if so, You could try <td style='white-space: nowrap'>.
按钮已显示为inline-block。也许桌子不够宽；如果是这样，你可以试试<td style='white-space: nowrap'>。
回答by uxkidd
If you're using Bootstrap, try using classes like "pull-left". This will float both of the buttons left and bring them inline. Also check to be sure nothing is overriding the current display attribute.
如果您使用的是 Bootstrap，请尝试使用“pull-left”之类的类。这将使两个按钮向左浮动并使它们内联。还要检查以确保没有任何内容覆盖当前的显示属性。
<div class="pull-left">...</div>
<div class="pull-right">...</div>
回答by Subhash Patel
Please see how to use <table>tag inside in <td>and get all button in line.
请查看如何在<table>内部使用标签<td>并使所有按钮对齐。
<table>
<td>
<table>
<tr>
<td>
<button class="btn btn-primary btn-xs">Add</button>
</td>
<td>
<button class="btn btn-primary btn-xs">Edit</button>
</td>
<td>
<button class="btn btn-primary btn-xs">View</button>
</td>
</tr>
</table>
</td>
</table>回答by Berendschot
Did you tried display: inline-block;?
However that seems unnecessary because two buttons in the same table cell will appear on the same line.
你试过display: inline-block;吗？然而，这似乎没有必要，因为同一表格单元格中的两个按钮将出现在同一行上。
table,
td,
tr {
border: 1px solid black;
border-collapse: collapse;
}<table>
<tr>
<td>
<button>Button1</button>
<button>Button2</button>
</td>
</tr>
</table>回答by Babajide Apata
What you need is just css display inline code, which can be use to format your button
form {
display: inline;
}
您需要的只是 css 显示内联代码，可用于设置按钮的格式
form {
display: inline;
}
this displays an element as an inline element like span
这将一个元素显示为一个内联元素，如 span
