Texteingabe rechts in td ausrichten?

Question

Ich versuche, die Texteingabe nach rechts auszurichten und aus irgendeinem Grund tut dies nicht.

I style="text-align: right" in <td>

Siehe Beispiel verwendet haben:

https://jsfiddle.net/DTcHh/31200/

-Code

<table class="table"> 
    <thead> 
    <tr> 
     <th>Field 1</th> 
     <th style="text-align:right">Field 1</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Text 1</td> 

     <td style="text-align: right"> 
     <div class="form-group" style="text-align: right"> 
      <input style="width:60px" type="number" class="form-control" value="test"> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

Keine zusätzliche CSS benötigt wird verwenden nur Bootstrap pull-right:

https://jsfiddle.net/cp1tvuj3/

<div class="form-group"> 
      <input style="width:60px" type="number" class="form-control pull-right" value="test"> 
</div> 

Updated fiddle

text-right wird nicht funktionieren, weil die form-controldisplay: block ist

Answer 2

Scheint, wie Sie gerade hinzufügen float: right; ist der Trick, siehe

url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<table class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Field 1</th> 
 
     <th style="text-align:right">Field 1</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Text 1</td>  
 
     <td style="text-align: right"> 
 
     <div class="form-group" style="text-align: right; float:right"> 
 
      <input style="width:60px" type="number" class="form-control" value="test"> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

die div um das Eingabefeld in Ihrem td auch eine Art von

display:inline-block; 

Geben behebt das Problem, ohne Schwimmer mit potenziell andere Dinge zu brechen.

https://jsfiddle.net/DTcHh/31202/

Answer 4

inline-block zu Ihrem div-Element hinzufügen, wird standardmäßig die div ein Blockelement ist, so dass es die komplette Breite des übergeordneten nimmt

<div class="form-group" style="text-align: right;display:inline-block;"> 
      <input style="width:60px" type="number" class="form-control" value="test"> 
</div> 

https://jsfiddle.net/RACCH/y9fvo4dj/

Answer 5

Sie müssen füge die Bootstrap Klasse hinzu. "Pull-rechts" den Code Geige finden:

`https://jsfiddle.net/DTcHh/31204/e`