CSS元素的定位

Question

我在我的應用程序中構建了一個聊天組件。

我有以下幾點：

我想刻度定位到的時間的權利，使蜱藍色。很像WhatsApp那樣做。

任何CSS建議讚賞。

謝謝

HTML

<span class="time-tick"> 
    <span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span> 
    <div *ngIf="message.readByReceiver && senderId == message.senderId"> 
     <span class="checkmark"> 
      <div class="checkmark_stem"></div> 
      <div class="checkmark_kick"></div> 
     </span> 
    </div> 
    </span> 

CSS

.messages-page-navbar { 
    .chat-picture { 
    width: 50px; 
    border-radius: 50%; 
    float: left; 
    } 

    .chat-title { 
    line-height: 50px; 
    float: left; 
    } 
} 

.messages-page-content { 
    > scroll-content { 
    padding: 0; 
    } 

    .messages { 
    height: 100%; 
    background-image: url(/assets/chat-background.jpg); 
    background-color: #E0DAD6; 
    background-repeat: no-repeat; 
    background-size: cover; 
    } 

    .message-wrapper { 
    margin-bottom: 9px; 

    &::after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 
    } 

    .message { 
    display: inline-block; 
    position: relative; 
    max-width: 236px; 
    border-radius: 7px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15); 

    &.message-mine { 
     float: right; 
     background-color: #DCF8C6; 

     &::before { 
     right: -11px; 
     background-image: url(/assets/message-mine.png) 
     } 
    } 

    &.message-other { 
     float: left; 
     background-color: #FFF; 

     &::before { 
     left: -11px; 
     background-image: url(/assets/message-other.png) 
     } 
    } 

    &.message-other::before, &.message-mine::before { 
     content: ""; 
     position: absolute; 
     bottom: 3px; 
     width: 12px; 
     height: 19px; 
     background-position: 50% 50%; 
     background-repeat: no-repeat; 
     background-size: contain; 
    } 

    .message-content { 
     padding: 5px 7px; 
     word-wrap: break-word; 

     &::after { 
     content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; 
     display: inline; 
     } 
    } 

    .message-timestamp { 
     position: absolute; 
     bottom: 2px; 
     right: 7px; 
     font-size: 12px; 
     color: gray; 
    } 
    } 
} 

.message-datetime { 
    font-size: 11px; 
    color: grey; 
} 

.messages-page-footer { 
    padding-right: 0; 

    .message-editor { 
    margin-left: 2px; 
    padding-left: 5px; 
    background: white; 
    border-radius: 3px; 
    } 

    .message-editor-button { 
    background: color($colors, whatsapp); 
    box-shadow: none; 
    width: 50px; 
    height: 50px; 
    font-size: 17px; 
    margin: auto; 
    } 
} 

.checkmark { 
    display:inline-block; 
    width: 22px; 
    height:22px; 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 
    transform: rotate(45deg); 
} 

.checkmark_stem { 
    position: absolute; 
    width:3px; 
    height:9px; 
    background-color:#ccc; 
    left:11px; 
    top:6px; 
} 

.checkmark_kick { 
    position: absolute; 
    width:3px; 
    height:3px; 
    background-color:#ccc; 
    left:8px; 
    top:12px; 
} 

.time-tick { 
    display:inline-block; 
} 

Answer 1

下你的CSS message-timestamp，從7px增加right價值高達約15px 。

然後.checkmark下，添加以下內容：

position: absolute; 
bottom: 2px; 
right: 7px;