Question

我试图获得的文字是＆＃34;测试＆＃34;在白色DIV内，指南针标志旁边。我不确定我在这里做错了什么或如何解决这个问题。这是一张它看起来像什么的图像：http://imgur.com/y1Jan8B

这是我的CSS：

#nav{
clear: both;
margin-top: 20px;
background-color: #FFF;
width: 45%;
height: 75px;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
-webkit-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46);
-moz-box-shadow:    0px 6px 5px 0px rgba(48, 50, 50, 0.46);
box-shadow:         0px 6px 5px 0px rgba(48, 50, 50, 0.46);
}
img.logo{
margin-top: -15px;
display: inline;
}
h1.title{
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 2.5em;
color: #FFEA00;
display: inline;
}

和HTML

<div id="nav">
    <img class="logo" src="images/compass.png" alt="Compass" />
    <h1 class="title">Test</h1>
</div>

提前致谢

Answer 1

要让图片显示在h1上方，您只需将position:absolute;应用于图片本身，然后就可以移除一些不必要的CSS：）

以下是 Fiddle 的实际操作

<强> CSS

您只需要position:absolute允许文字在图片下方移动，就像（{松散地说）position:absolute removes the target element from it's position in the semantic flow一样，将其放置在距离它最近的祖先位置

img.logo{
    /*margin-top: -15px;*/
    /*display:inline;*/
    position:absolute;

}

您也可以删除其他一些CSS：

h1.title{
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 2.5em;
    color: red;
    /*display: inline;*/ 
    /*margin-top: -500px;*/
}

CSS h1定位

1 个答案: