css - 将文本和图像定位在导航栏上方。 HTML/CSS

Question

我正在尝试创建一个网站，其中左侧是 Logo ，右侧是文本(与 Logo 图像一起)，并且所有内容都位于导航栏上方，但是我无法设法让它们进入位置!

CSS

.headerLogo{
    float:left;
    margin-top: 20px;
}

.headerText{
    float:right;
    margin:auto;
}

HTML

<div class="headerLogo">
<img src="Logo.gif" />
</div>

<div class="headerText">
<h1>Together, we can create change.</h1>
<p>Qui cu imperdiet temporibus, nam at autem falli, cum audire salutandi abhorreant
eu. No postea mollis lobortis pri. Natum pertinax consulatu eam an, an vix omnium
appellantur, tamquam petentium cotidieque ut pri. In sea aliquid omittantur.</p>
</div>

<nav>
    <ul class="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="volunteer.html">Volunteer</a></li>
        <li><a href="donate.html">Donate</a></li>
    </ul>
</nav>

Answer 1

要进行相应设置，请尝试提供如下样式，将 div 作为相对位置。

.headerLogo {
float:left;
margin:auto;
display:inline-block;
}   

.headerText {
margin-top: 10px;
margin-right: 20px;
float: right;
position: relative;
display:inline-block;
}