Question

我有一张桌子并在最后一栏放了2个按钮，但它们彼此相同。它看起来如下：

HTML代码如下所示：

<div class="table-responsive">
    <table class="table table-bordered table-hover" style="width: 80%;">
        <thead>
            <tr>
                <th>ID</th>
                <th>Gender</th>
                <th>FirstName</th>
                <th>LastName</th>
                <th>EMail</th>
                <th>CompanyName</th>
                <th>JobTitle</th>
                <th>Phone</th>
                <th>Avatar</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in contacts">
                <td>{{item.Id}}</td>
                <td>{{item.Gender}}</td>
                <td>{{item.FirstName}}</td>
                <td>{{item.LastName}}</td>
                <td>{{item.EMail}}</td>
                <td>{{item.CompanyName}}</td>
                <td>{{item.JobTitle}}</td>
                <td>{{item.Phone}}</td>
                <td><img src="{{ item.Avatar }}" /></td>
                <td>
                    <button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
                    <button ng-click="delete($index)" class="btn btn-primary">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>

我尝试了很多设置，但没有用。

如何将它们放在一起？

更新：

Answer 1

您可以使用以下代码并实现

<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Delete</button>

或者如果您使用Bootstrap，那么您可以从Bootstrap Group Buttons获取Bootstrap代码或使用以下代码

    <div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">Right</button>
  </div>
</div>

实现

Answer 2

样式表中的

使按钮css显示为内联或内联块还要检查TD宽度和按钮宽度。如果按钮宽度大于TD宽度，它肯定会突破到下一行

Answer 3

这是一个很容易解决的问题。

在结构中使用表时，可以使用最后一列中的表。

在最后一列JTable内，添加一个表格。表体看起来应该是这样的。

＆＃13;

td

＆＃13;

Answer 4

试试这个

<div class="list-unstyled list-inline"><button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button><button ng-click="delete($index)" class="btn btn-primary">Delete</button></div>

Answer 5

您要找的是一个按钮组。

   <div class="btn-toolbar" role="toolbar">
                            <!-- Button trigger modal -->
                            <div class="btn-group mr-2" role="group" aria-label="First group">
                                <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                        data-target="#editModal">Edit
                                </button>
                            </div>
                            <div class="btn-group mr-2" role="group" aria-label="Second group">
                                <button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
                                </button>
                            </div>
                        </div>

如何将按钮放在一起？

5 个答案: