如何让HTML元素坚持到屏幕的右侧

Question

我有一个动态显示个人笔记的AngularJS应用程序。我希望下拉选择元素坚持到右侧（所以它们正确排列），但我不能让它不受它之前的元素（它说“电话/文本”）的影响。这样做的正确方法是什么？

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

将.contact-history-button更改为：

position: absolute;
right: 0;

而不是左：50％;

然后将position:relative添加到父元素。

无论如何，它们总是会粘在父母的右侧，你可以调整顶部/右部位置，使其与其他元素对齐。