1

私は「中級」の 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 を使用しています ... これが問題を引き起こしているとは思いませんが、人々の考え方が多少変わる可能性があります。どんな助けでも大歓迎です。

4

4 に答える 4

1

your<ul>は div でラップされています。これはデフォルトではブロックレベルの要素であるため、他のすべての要素を一番下に押し込みました。

あなたがする必要があるのは、このdivを与えることだけです:display: inline-block

于 2013-09-29T11:21:58.887 に答える