CSS - Position div an der oberen rechten Ecke einer Tabelle

Question

Hier finden Sie Screenshots. Ich möchte das Export-Symbol oben rechts auf einer Tabelle positionieren. Wenn ich float:right gebe, wird das Symbol div neben der Tabelle angezeigt.

Ohne float: right

<div style="float: right;"> 
     <i class="ebIcon ebIcon_export ebIcon_interactive" title="Export"></i> 
    </div> 

Elternteil div von Symbol:

height: 100%; 
padding: 16px 0; 

Und es gibt eine Tabelle div unten Symbol div:

position: relative; 
overflow: hidden; 

Da dies ein Teil des Plugin sein, muss ich sicherstellen, dass Export-Symbol auf der rechten Seite einer Spitze einer Tabelle immer Position hat

Wie kann ich Positionssymbol div oben rechts auf dieser Seite von einem Tisch div?

Answer 1

Sie müssen alle Ihre Elemente in diese Art von Fragen zu kopieren, aber um einen allgemeinen Sinn zu geben, wenn Sie eine Anzeige block Komponente wie div haben, dauert es die ganze horizontal Platz, der verfügbar ist.

So ein i oder span zu bewegen, die Sie inline Elemente können text-align: right gerade tun:

Hier ist ein Beispiel:

div { 
 
    background: grey; 
 
    text-align: right; 
 
    padding: 1rem; 
 
} 
 
div span { 
 
    font-size: 3rem; 
 
}

<div> 
 
    <span>☺</span> 
 
</div>

Damit die demonstrieren div (block Elemente) erweitert auf horizontale Spa Ich habe ihm eine graue Hintergrundfarbe gegeben.

Und bitte aufhören Floats mit, flex-box ist eine viel bessere Lösung :)

Answer 2

können Sie folgende Klasse verwenden:

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

<div style="float: right;"> 
    <i class="ebIcon ebIcon_export ebIcon_interactive" title="Export"></i> 
</div> 
<div class="clearfix"></div> 

Answer 3

Stellen Sie sicher, div, dass die Tabelle die gleiche Breite hat. Add text-align: rigth zu div