Wie bekomme ich ein HTML-Element, um auf der rechten Seite des Bildschirms zu bleiben

Question

Ich habe eine AngularJS App, die dynamisch die Notizen einer Person anzeigt. Ich möchte, dass das Dropdown-Element select auf der rechten Seite bleibt (so dass sie korrekt ausgerichtet sind), aber ich kann nicht ganz sicher sein, dass das Element (wo es "Telefon/Text" heißt) nicht davon betroffen ist. Was ist der richtige Weg, dies zu tun?

HTML

<!-- --> 
<!-- Note holder --> 
<!-- --> 
<div class="note-wrapper" ng-repeat="note in vm.myData[0].contactHistoryContainer track by $index"> 

<div class="contact-history-date-device-wrapper"> 
    <p class="contact-history-date-device-text"> 
    {{note.contactHistoryNoteDate}} | {{note.contactHistoryNoteDevice}} 
    </p> 
</div> 

<select class="browser-default contact-history-button"> 
    <option value="1" ng-model="vm.myData[0].contactHistoryIncomingOutgoing">Incoming</option> 
    <option value="2" ng-model="vm.myData[0].contactHistoryIncomingOutgoing">Outgoing</option> 
</select> 



<div class="contact-history-note-text-wrapper"> 
    <p class="contact-history-note-text"> 
    {{note.contactHistoryNoteText}} 
    </p> 
</div> 

<div class="contact-history-horizontal-line"></div> 

CSS

.contact-history-date-device-text { 
font-family: 'Roboto', sans-serif; 
font-size: 14px; 
font-weight: 500; 
color: #505C64; 
text-transform: capitalize; 
} 

.contact-history-date-device-wrapper { 
    margin-top: 30px; 
    margin-left: 30px; 
    display: inline-block; 
} 

.contact-history-note-text-wrapper { 
    height: 20px; 
    width: 60%; 
    overflow: hidden; 
    margin-top: 20px; 
    margin-left: 30px; 
    display: block; 
} 

.contact-history-note-text { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 400; 
    color: #626F77; 
    height: 16px; 
} 

.contact-history-horizontal-line { 
    height: 1px; 
    width: 90%; 
    margin-left: 5%; 
    margin-right: 5%; 
    background-color: rgba(80, 92, 100, 0.1); 
    margin-top: 40px; 
} 


.contact-history-button { 
    width: 175px; 
    height: 36px; 
    border-radius: 3px; 
    border: 1px solid; 
    border-color: rgba(119, 119, 119, 0.4); 
    display: inline-block !important; 
    position: relative; 
    left: 50%; 
} 

.edit-note-wrapper { 
    display: none; 
    margin-left: 30px; 
    margin-top: 30px; 
} 

Answer 1

ändern .contact-history-button haben:

position: absolute; 
right: 0; 

Statt links: 50%;

Und dann fügen Sie position:relative zum Elternelement hinzu.

Sie werden immer an der rechten Seite des Elternteils bleiben, egal was, Sie können die oberen/rechten Positionen anpassen, um sie mit anderen Elementen auszurichten.