0

Webアプリのヘッダーセクションを作成中です。物事を適切に配置および配置するのに問題があります。ここに画像の説明を入力してください

右側に表示されているログアウトボタンは、明るい灰色の領域に移動するはずです。つまり、ロゴと同じようになります。これはそのセクションのhtmlです：

<div>

    <img src="Images/logo.png" id="imgLogo" alt="" />
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />

</div>

これらの要素のCSS：

#imgLogo{
    margin: 0 auto;
    display: block;
}

#imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}

私は何が間違っているのですか？そのダーンログアウトボタンをさらに上に移動させるにはどうすればよいですか？前もって感謝します！

4

3 に答える 3

4

img ロゴの場合、div 要素を作成し、それを背景として次のようにします。

#imglogo{
    background: url('Images/logo.png') no-repeat;
}

次に、ログアウト ボタンについては、次のように div 内に配置します。

<div id="imglogo">
<img src="Images/logout-idle.png"
     alt=""
     id="imgLogout"
     onmouseover="this.src='Images/logout-hover.png'"
     onmouseout="this.src='Images/logout-idle.png'"
     onmousedown="this.src='Images/logout-down.png'"
     />
</div>

お役に立てば幸いです。

于 2012-05-04T10:43:13.547 に答える
4

設定した場合

 #imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    }

に

 #imgLogout{
     position: absolute;
     top: 4px;
     right: 10px
     }

これにより、必要な場所に配置されます。

于 2012-05-04T10:44:53.393 に答える
1

要素ごとに幅を設定する必要があります。2 番目の img は

display: block

同じように。

または、このようなものを使用できます

#imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}


#imgbg {

    background-image: url(Images/logo.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}




<div id="imgbg">
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />
</div>
于 2012-05-04T10:39:00.273 に答える