私は「中級」の CSS ユーザーですが、css について詳しく知っている人からの答えは驚くほど簡単に修正できると思われるにもかかわらず、解決できないように見える問題を抱えています ...
マークアップの日付を簡単に視覚的に表現したのは次のとおりです。
<ul class="visual-date">
<li class="day-of-week text-muted">
{{view.dayOfWeek}}
</li>
<li class="day-of-month">
{{view.dayOfMonth}}
</li>
</ul>
これにより、次のように表示されます。
次の CSS を使用します。
.visual-date {
list-style-type: none;
width: 85px;
text-align: center;
padding: 5px 1px 5px 1px;
.day-of-week {
background-color: #272927;
color: white;
font-size: 8pt;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-width: 1px;
border-color: #CBCDCA;
border-style: solid;
}
.day-of-month {
font-size: 24pt;
border-width: 1px;
border-color: #CBCDCA;
border-style: solid;
}
}
それはうまくいくようですが、私が苦労しているのは、このウィジェットを配置すると、次のテキストを同じ水平線に置くことができず、代わりに常に次の行にドロップされることです。完全なコード例は次のとおりです。
http://codepen.io/kensnyder/full/uBAsl
明示的に、私が望むのは、「今日」のテキストが視覚的な日付ウィジェットのすぐ右側にあることです。注意してください、私は Bootstrap 3.0 を使用しています ... これが問題を引き起こしているとは思いませんが、人々の考え方が多少変わる可能性があります。どんな助けでも大歓迎です。