将文本和图像定位在导航栏上方。 html/css答案

【问题标题】：Positioning text and an image above a navigation bar. html/css将文本和图像定位在导航栏上方。 html/css
【发布时间】：2016-03-21 17:05:49
【问题描述】：

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

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>

【问题讨论】：

您好，请发布您已经完成的内容。所以我们可以更快地帮助您。 Stackoverflow 更有助于解决特定问题，而不是“为我做这件事”
一个很好的起点是一个看起来像你想要的模板，你试过了吗？这是一个拥有惊人的免费 html 5 模板的网站 - html5up.net

标签： css html css-position positioning

【解决方案1】：

只需要设置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>

【讨论】：

【解决方案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> 元素上设置宽度并在图像和文本之间留出一个边距

【讨论】：

afaik，默认情况下图像是 not block 元素。它们是内联的，有时表现为内联块。
@gofrzero 我的错 :) 感谢我正在编辑答案的信息

【解决方案3】：

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

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

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

【讨论】：