it-swarm.com.de

Stellen Sie 2 Schaltflächen in einer Tabellenzelle nebeneinander

Ich habe folgenden 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>

Sie erscheinen in 2 verschiedenen Zeilen.

Wie kann ich sie in derselben Zeile nebeneinander anzeigen lassen?

Ich habe ein paar Dinge mit float und display ausprobiert, aber ohne Erfolg.

5
Ellone

Wenn ich diesen Code in einem Snippet hinzufüge, befinden sich die Schaltflächen nebeneinander, sodass es schwierig ist, Folgendes zu reproduzieren:

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

Die Schaltflächen werden bereits als inline-block angezeigt. Vielleicht ist der Tisch nicht breit genug; Wenn ja, könnten Sie versuchen, <td style='white-space: nowrap'>.

12
Kenney

Wenn Sie Bootstrap verwenden, versuchen Sie es mit Klassen wie "pull-left". Dadurch werden beide Schaltflächen nach links verschoben und in Linie gebracht. Stellen Sie außerdem sicher, dass das aktuelle Anzeigeattribut nicht überschrieben wird.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
2
uxkidd

Bitte lesen Sie, wie Sie das <table>-Tag in <td> verwenden und alle Schaltflächen in eine Linie bringen.

<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>
2
Subhash Patel

Hast du display: inline-block; ausprobiert? Dies erscheint jedoch unnötig, da zwei Schaltflächen in derselben Tabellenzelle in derselben Zeile angezeigt werden.

table,
td,
tr {
  border: 1px solid black;
  border-collapse: collapse;
}
<table>
  <tr>
    <td>
      <button>Button1</button>
      <button>Button2</button>
    </td>
  </tr>
</table>
1
Berendschot

Was Sie brauchen, ist nur CSS-Inline-Code anzeigen, mit dem Sie Ihre Schaltfläche formatieren können. form { display: inline; }

dies zeigt ein Element als Inline-Element wie span an

0
Babajide Apata