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

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

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 2

要相应地设置，尝试给出如下样式，将div作为位置相对。

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

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

Answer 3

只需设置equals，这是您想要的结果吗？

clearfix

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

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

.clearFix{ clear: both};

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

3 个答案: