24

css 要素をヘッダーの右側に配置しようとしていますが、正確な方法がわかりません。私は使用してみました：

 position: Absolute; top: 20px; right 0px;

それは機能しますが、ブラウザを調整すると、テキストが一緒に移動します。

ここにある JFiddle を作成しました。

http://jsfiddle.net/rKWXQ/

このようにして、私がやろうとしていることを見ることができます。ラップされた div 要素内に Call Now (555) 555-5555 というテキストがあります。

ここにヘッダー要素があり、その中に right_header 要素があります。

    <div id="header">
        <span class="right_header">Call Now (555) 555-5555</span>
    </div>

ここに私のヘッダーCSSがあります:

   /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

誰かがこれを達成するための適切な方法を教えてください。

左側には、JFiddle にロードされないロゴがあることに注意してください。

ありがとう！

4

5 に答える 5

35

簡単に右に寄せることができ、位置決めfloatも必要ありません。relativeabsolute

.right_header {
    color: #fff;
    float: right;
}

更新された jsFiddle -このようなpadding/を追加する必要があるかもしれません。margins

于 2013-10-09T05:04:00.027 に答える
8

JoshC が述べたように、使用floatは 1 つのオプションです。ただし、あなたの状況は別の解決策を示唆していると思います。

要素を有効にするには、要素を設定position: relativeする必要があります。それを設定したら、自由に配置できます。#headerposition: absolute#right_header#right_header#header

于 2013-10-09T05:10:19.367 に答える
0

JoshC のフロートを使用した回答は問題なく機能しますが、これが機能しない理由があると思います。

コードが機能しない理由は、絶対位置が 0x0 の寸法を基準としているからです。

このコードが機能するためには、'' は絶対位置にある必要があります。

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

それを...に変更します

#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
于 2013-10-09T05:11:56.130 に答える