3

スクロールしないように設定された div バーがあるため、常に Web サイトの上に表示されます。このバーの内側に別の div ボックスがあり、その中にもう 2 つのボタンがあり、右に浮いて常に右上に表示されます。

問題は、ボタンをページの右上ではなく右上に配置することです。代わりに、ボディ要素が中央に配置されている場合、ボタンは中央に配置された要素の右上になります。

コードは次のとおりです。

<DIV class="fixedtop">
        <div class="language2">
            <div class="english"> <font id="buttontxt">ENGLISH</font></div>

            <div class="spanish"> <font id="buttontxt">SPANISH</font></div>

        </div>
    </DIV>

トップバーの CSS は次のとおりです。

   .fixedtop
{
    position: fixed;
    margin-left: 0 auto;
    margin-right: 0 auto;
    top: 0px;
    width:600px;
    height: 30px;
}



.language2
{
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    width: 600px;
    height: 30px;
    margin-right: 0px;
}

.spanish
{
    background-color:00ADEF;
    float: right;
    margin-right: 4px;
    padding-top: 10px;
    display: inline-block;
    width: 100px;
    height:30px;
    color:black;
    text-align: center;
    vertical-align: middle;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 3px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 3px 2px rgba(50, 50, 50, 0.75);
}

.english
{
    background-color:00ADEF;
    float: right;
    margin-right: 15px;
    display: inline-block;
    padding-top: 10px;
    width: 100px;
    height:30px;
    color:black;
    text-align: center;
    vertical-align: middle;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 3px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 3px 2px rgba(50, 50, 50, 0.75);


}
4

3 に答える 3

1

margin-left残念ながら、 CSS で固定要素を中央に配置するためにmargin-right使用することはできません。margin: 0 auto

したがって、left位置を 50% に設定し、左マージンを要素の幅の負の半分に設定する必要があります。

.fixedtop
{
    position: fixed;
    top: 0;
    left: 50%
    width: 600px;
    height: 30px;
    margin-left: -300px;
}
于 2012-10-14T10:57:34.237 に答える
0

親fixedtopにこのスタイルを設定します

parentfixedtop{
 position:relative;
}
于 2012-10-14T11:02:56.610 に答える
0

必要なものは次のとおりです。

            .fixedtop
        {
            position: fixed;
            top: 0px;
            left: 50%;
            margin: 0 0 0 -300px;
            width:600px;
            height: 30px;
            background: #060;
        }



        .language2
        {
            margin: 0 auto;
            background: #0F9;
        }

基本的に margin: auto は position: fixed または absolute では機能しません。そのため、左から 50% の位置に配置します。そして、.fixedtop の幅が 600px であることがわかっているので、左マージンを -300px にして、ページの中央に戻します。.language2 はブロック要素 (div) であるため、幅と高さを指定する必要はありません。そして技術的には margin: auto も時代遅れになります。動作がよくわかるように、両方の背景色をほんの一瞬だけ与えました。後で削除できます。お役に立てれば。

于 2012-10-14T10:57:39.353 に答える