css - ヘッダーがまっすぐに行きませんか？

Question

このヘッダーがまっすぐに行かない理由を誰か教えてください。私の目標は、One call ですべてが右側に表示され、800 の電話番号が右側に表示されるようにすることです。私はそれらを独自の div に配置しましたが、800# はラッピングされています。

div の代わりに float、text-align、さらには span を試しました。

ここでサイトを見つけることができます: http://jsfiddle.net/G78sd/

Answer 1

ブロックレベルの要素が 2 つあるため、それらは「ラッピング」されています。したがって、これを修正する 1 つの方法は、各要素に幅を与えてからフロートさせることです。

.CompanyName {
    color: #330000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 28px;
    font-weight: bolder;
    /* text-shadow: 3px 3px 4px rgba(0, 0, 0, .9); */
    font-variant:small-caps;
    margin-top: 22px;
    width: 450px;
    float: left;
}

.HeaderPhoneNumber {
    color: #330000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 28px;
    font-weight: bolder;
    /* text-shadow: 3px 3px 4px rgba(0, 0, 0, .9); */
    font-variant:small-caps;
    width: 450px;
    float: right;
    text-align: right;
}