Question

我正在我的网站中创建一个导航栏，我希望我的徽标显示在导航栏中我的网站名称旁边，但它不想合作。在下面的代码中是我的html，其中包含导航栏中的图像。

以下是我的css的样子。我尝试了所有不同的位置类型，并尝试设置navimage的边距和填充。

.navbar {
  width: 100%;
  height: 50px;
  background-color: #2ecc71;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
#navtitle {
  color: white;
  font-family: cursive;
  font-size: 25px;
  position: relative;
  top: 20;
  margin-top: 10px;
  margin-left: 40px;
}
#navimage {
  position: absolute;
  margin-top: 0px;
  margin-left: 140px;
}

<div class="navbar">
  <p id="navtitle">Rainforest</p>
  <div class="navimage">
    <a>
      <img src='http://i.imgur.com/Eqbvkgb.png'>
    </a>
  </div>
</div>

有什么想法吗？

Answer 1

最简单的方法是将图像放在段落中。

<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>

根据需要调整图像大小。

Answer 2

您的position: absolute会阻止图片显示，请尝试删除此图片并添加display:block，以便元素彼此相邻。您可能希望更改图像的CSS以使其更小。

Answer 3

尝试这样的事情。此外，图像大于50像素，因此它会自动进入导航栏以下，因为它无法放入内部。此外，您在html中将navimage标题设置为class，但它在您的CSS中写为id。 id带＃，类应该是.navimage

＆＃13;

.navbar {
  width: 100%;
  height: 50px;
  background-color: #2ecc71;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

#navtitle {
float: left;
}
.navimage {
float:left;
}

＆＃13;

<div class="navbar">
    <div id="navtitle"><p>Rainforest</p></div>
  <div class="navimage">
    <a>
      <img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
    </a>
  </div>
</div>

＆＃13;

Answer 4

<强>概念

使用float property。

守则：

对导航栏及其元素使用float:left;。这样可以让它们相互重叠。
使用position定位它们。

注意：我给了img本身。直接操作图像总是更容易

.navbar {
  width: 100%;
  height: 50px;
  background-color: #2ecc71;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  float:left;
}
#navtitle {
  color: white;
  font-family: cursive;
  font-size: 25px;
  position: relative;
  top: 20;
  margin-top: 10px;
  margin-left: 40px;
  float: left;
}
#navimage {
  position: absolute;
  
  margin-top: 0px;
  margin-left: 140px;
  float:left;
  
}
#logoimg{
  height: 50px;
  position: absolute;
  left: 2px;
  }

<div class="navbar">
  <p id="navtitle">Rainforest</p>
  <div class="navimage">
    <a>
      <img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
    </a>
  </div>
</div>

Answer 5

你设置了一个absolute对象的定位，所以你应该这样做：

.navbar {
    width: 100%;
    background-color: #2ecc71;
    z-index: 1;
    position: absolute;top:0;left:0;
}

#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
    margin-top:10px;
}
#navimage, img {
    display:inline;
    float:left;
    width:30px;
    height:40px;
    padding:10px
}

http://jsfiddle.net/u3upgedx/

图像没有出现在div内部

5 个答案: