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.
How can I make them appear next to each other on the same line ?
I tried a few things with float
and display
but without success.
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'>
.