Question

我有一个看起来像这样的标题。现在，我想在标题的右侧添加图像，以用作联系人和帮助链接按钮。

我该怎么做？

#header {
    position: absolute;
    top: 0px;
    height: 40px;
    color: #eee;
    background: linear-gradient(#fff, #e3e3e3);
    width: 100%;
}

#header img {
    float: left;
    margin-top: 14px;
    margin-left: 10px;
    width: 142px;
    height: 12px;
}

和

<div id="header">
    <img src="logo.png" alt="logo" />
</div>

Answer 1

这可能会对您有所帮助。

 .header
              {
                    position:absolute;
                    top:0px;
                    height:40px;
                    color:#333;
                    background: linear-gradient(#fff, #e3e3e3);
                    width:100%;
              }
              .logo {
                    float: left; 
              }
              
              .logo img {
                    margin-top: 14px;
                    margin-left: 10px;
                    width: 142px;
                    height: 12px;
                   }
              
             .images{
                    float:right;
                    margin-top: 14px;
                    margin-left: 10px;
                    width: 142px;
                    height: 12px;}

<div class="header">
          <div class="logo"><img src="logo.png" alt="logo"></div>
          <div class="images"><img src="contact.png" alt="contact"><img src="help.png" alt="help"></div>
        </div>

Answer 2

如果您要第二张图像右对齐。

我在原始元素下方添加了一个新的<img>元素，并为其分配了一个ID。即logo1和logo2。

#header {
  position: absolute;
  top: 0px;
  height: 40px;
  color: #eee;
  background: linear-gradient(#fff, #e3e3e3);
  width: 100%;
}

#header img,
#logo1 {
  float: left;
  margin-top: 14px;
  margin-left: 10px;
  width: 142px;
  height: 12px;
}

#header #logo2 {
  float: right;
}

<div id="header">
  <img id="logo1" src="logo.png" alt="logo" />
  <img id="logo2" src="logo2.png" alt="logo" />
</div>

Answer 3

如果我对您的理解很好，您希望图像充当按钮，则意味着图像是链接。

因此用a标签包裹图像，并将href设置为您想要的任何位置

 #header
   {
      position:absolute;
      top:0px;
      height:40px;
      color:#eee;
      background: linear-gradient(#fff, #e3e3e3);
      width:100%;
}
 #header img {
   float: left;
   margin-top: 14px;
   margin-left: 10px;
   width: 142px;
   height: 12px;
}

 <div id="header">
   <a href="home"><img src="logo.png" alt="logo" /></a>
</div>

如何在此标题中添加两个图像？

3 个答案: