0
チャットアプリケーションを開発中です。そのチャットメッセージボックスで、私はメッセージ、ユーザーの名前、現在の日付と時刻を表示する必要があります。私は時間と日付UIが良い見ていない以外のすべてのものを示しています。あなたが変更したいスパンを定義するには、時間のクラスを使用することができますチャットメッセージボックスに日付と時刻を正しく表示する方法
.userTextDivOp {
\t text-align: left;
\t float: left;
\t clear: both;
\t position: relative;
\t background: white;
\t padding-top: 5px;
\t padding-bottom: 7px;
\t padding-left: 7px;
\t padding-right: 7px;
\t border-radius: 6px;
\t border: 3px solid #999;
\t font-size: 12px;
\t margin-bottom: 7px;
\t margin-right: 4px;
\t margin-left: 4px;
}
.userTextDivOp::before {
\t content: '';
\t position: absolute;
\t visibility: visible;
\t top: -3px;
\t left: -11px;
\t border: 9px solid transparent;
\t border-top: 11px solid #999;
}
.userTextDivOp::after {
\t content: '';
\t position: absolute;
\t visibility: visible;
\t top: 0px;
\t left: -6px;
\t border: 9px solid transparent;
\t border-top: 8px solid white;
\t clear: both;
}
.userTextDivOp .message {
\t word-break: break-all;
\t font-size: 13px;
}
.userTextDivOp .username {
\t position: relative;
\t display: block;
\t font-weight: bold;
\t font-size: 14px;
\t color: #8e0035;
\t text-align:left;
\t padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
\t position: absolute;
font-size: 14px;
color: #f60;
}<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
は、なぜあなたはJavaScriptでこの質問をタグ付けしました..... CSS –
削除 '位置についてその：absolute' .time''のと追加'display：block'をそれに追加します。 [** this **]（https://jsfiddle.net/cq2ja1uz/1/）を参照してください – Mohammad
私はあなたが時間と日付の明るい灰色を使用することができると思います。それは目立つべきではない。例えば'＃eee'と少し小さい' font-size' – Abbr