如何获取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元素以粘贴到屏幕右侧

回答

相关问题