Как поставить кнопки рядом друг с другом?

Question

У меня есть стол и положить две кнопки в последнем столбце, но они одно друг под другом. Это выглядит следующим образом:

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> 

Я пробовал много настроек, но это не помогает.

Как разместить их рядом друг с другом?

UPDATE:

Answer 1

Это простая проблема для исправления.

Как вы использовали таблицы в своей структуре, вы можете использовать таблицы в последнем столбце.

В этом последнем столбце td, добавьте таблицу. Тело стола должно выглядеть так.

<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> 
 
      <table> 
 
      <tbody> 
 
       <tr> 
 
       <td> 
 
        <button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button> 
 
       </td> 
 
       <td> 
 
        <button ng-click="delete($index)" class="btn btn-primary">Delete</button> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

Answer 2

Вы можете использовать ниже код и достижения

<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 код из Bootstrap Group Buttons или использовать ниже код

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

в таблице стилей введите кнопку css display для встроенного или встроенного блока Также проверьте ширину и ширину кнопок. Если ширина кнопок больше, чем ширина TD, то она наверняка прорвется до следующей строки.

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>