0

ページのコンテンツ領域で一番上の固定ナビゲーションバーを中央に配置してからフロートしようとしています。現在、ナビゲーション バーは右に浮いていますが、コンテンツ エリアの中央にありません。

クリックして対象サイトを表示します。

CSS

#topribbon{
width: 100%; 
height: 30px; 
background-color: #AA1119 ; 
margin: -11px 0px 1em 0px; 
position: fixed; 
z-index: 9999; 
}
#topribbon ul{

padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}

#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}

#topribbon ul li:hover{
color:#5C8FA5;

HTML

<div id="topribbon">  <ul>
        <li>Free Ground Shipping on all orders over $99!</li>
        <li>Why Us?</li>
        <li>Account</li>
        <li>Cart</li>
        <li>+1-800-555-5555</li>
    </ul>

</div>
4

5 に答える 5

0

あなたが何をしようとしているのか完全に明確かどうかはわかりませんが、ULを右にフロートさせ、その中のすべてのLIを中央に配置したい場合は、これを行うことができます:

#topribbon ul { float:right; text-align: center; }

#topribbon ul li { display: inline-block; }

float:right;li スタイル ブロックからを必ず削除してください。

「私のコンテンツ エリアを中心に」という言葉が別の意味である場合は、さらに説明していただけますか?

于 2013-08-12T14:50:07.173 に答える
0

私の最初の推測では、 ul要素の幅が機能しないということです。

代わりにこれを試してください

<div id="topribbon">  
    <div class="ribbonwrapper" style="width:980px;margin:0 auto;">    
     <ul> 
         <li>Free Ground Shipping on all orders over $99!</li>
         <li>Why Us?</li>
         <li>Account</li>
         <li>Cart</li>
         <li>+1-800-555-5555</li>
      </ul>
    </div>
</div>

.ribbonwrapper のスタイルを CSS に入れて、コードを整理します :) 次に、#topribbon ulの無関係な width と margin プロパティを削除できます

于 2013-08-12T14:47:26.237 に答える
0

で試してみてfloat:none;ください#topribbon ul

于 2013-08-12T14:59:40.463 に答える