Question

在为网上申请设立一个标题栏目的过程中,Im。 I m 有一些困难,难以调整和定位它应当采取什么方式:

The logout button you see there on the right should move up into the light grey area. So in other words, in the same lign as the logo. This is the html for that section:

<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>

The CSS for these elements:

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

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

What am I doing wrong? What can I do to get that darn logout button to move more to the top? Thanks in advance!

Answer 1

如果是,

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

页: 1

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

这将使你希望这样做。

Answer 2

就原木而言,我要作一小事,并具有这样的背景:

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

然后,在 but子外,我就这样说:

<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>

I hope that helped.

Answer 3

您应为每个要素设定宽度。第二点

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>

友情链接