如何獲取HTML元素以粘貼到屏幕右側

我有一個AngularJS應用程序，可以動態顯示某人的筆記。我希望下拉選擇元素保持在右側（所以它們排列正確），但我不能完全理解它在它之前不會受到元素（它表示「電話/文本」的位置）的影響。什麼是正確的方法來做到這一點？如何獲取HTML元素以粘貼到屏幕右側

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

來源

2016-11-23 IWI

變化.contact-history-button有：

position: absolute; 
right: 0;

而不是左：50％;

然後將position:relative添加到父元素。

它會一直堅持父母的右側，無論如何，您可以調整頂部/右側位置，使其與其他元素排隊。

來源

2016-11-23 18:52:28 PhonicUK

感謝您的意見。我這樣做了，他們是在右邊，但他們似乎是修復的，並不滾動屏幕，雖然DOM不顯示他們有'固定'屬性 – IWI

我需要一個更好的樣本，然後玩用。將一些呈現的HTML放入jsfiddle中。 – PhonicUK

如何獲取HTML元素以粘貼到屏幕右側

回答

相關問題