定位文本和导航栏上方的图像。 html/css

Question

我正在尝试创建一个网站，其中左侧是徽标，右侧是文本（与徽标图像一起），并且所有内容都位于导航栏上方，但是我无法设法将它们定位在全部！

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

Answer 2

我对措辞有点困惑，但请看看这个解决方案，看看这是不是你的意思，否则我会编辑答案

Jsfiddle：http://jsfiddle.net/gLLa20yp/

img{
  display: inline-block;
  float: left;
  width: 10%;
}

nav{

  margin-top: 5%  
}

.nav li{
  display: inline-block;
  margin-left: 15%;
 }

如果您不想要水平菜单，请删除最后一部分。

未来的工作：为了让它看起来更好，我建议在

<p>

元素上设置宽度并在图像和文本之间留出边距

Answer 3

只需设置

clearfix

，这就是你要的结果吗？

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

.headerText{
    float:right;
    margin:auto;
    width: 50%
}

.clearFix{ clear: both};

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

<div class="clearFix">

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