0

OKみんな、ここに私の問題があります。私の Web サイトにはナビゲーション バーがあり、サイトの管理者がカスタマイズできます。管理者は、ナビゲーション バーにリンクを追加して、リストの幅が動的になるようにすることができます。バーの右隅には、検索ボックス付きの div 要素があります。これらは、これら 2 つの div の CSS プロパティです。

.head_navigation
{
    float:left;
    height:51px;
    padding-top:7px;
    margin:0;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
    text-align: center;
}

.head_navigation_right{
    float:right;
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}

右側の div で左側の空白を埋めることはできません。左の div は動的であるため、右の div に固定マージンを設定することはできません。私も試しました：

width: 100%;

右の div を下の行に配置し、ページ全体を埋めます。何か助けはありますか？

4

2 に答える 2

1

http://jsfiddle.net/Zx9gw/1/

head_navigation_right から float プロパティを削除します。

.head_navigation_right{
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}​

残念ながら、これがなぜなのかはわかりませんが、float は要素の表示を変更するため、他の要素が残りのスペースを占めるようになると推測できます。

于 2012-07-04T11:39:34.263 に答える
0

左右の両方の div を、必要な背景を持つ div コンテナーに入れます。

例えば：

<div id="menuBar">
     <div class="head_navigation"></div>
     <div class="head_navigation_right"></div>
     <div style="clear:both"></div>
</div>

そして、メニューバーに必要な背景を与えます...質問を正しく理解したと思います。

編集 - 別の解決策

.head_navigation と .head_navigation_right のコンテナを作成します position:relative; 高さがない場合は、高さを指定します。次に、これを CSS に適用します。

.head_navigation
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    height:51px;
    padding-top:7px;
    margin:0;
    width:100%;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
        text-align: center;
}

.head_navigation_right{

    position:absolute;
    right:0px;
    top:0px;
    z-index:2;
border:0;
margin:0;
padding:0;
padding-top:7px;
height:51px;
background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
text-align:right;
}
于 2012-07-04T11:38:06.467 に答える