Question

我想在标题旁边放一张图片。但问题是我希望这个图像用位置固定：相对。然而，当我修复图像时，它在图像和标题之间形成了一个很大的空间。

<h1 id="htitre"><img src="title.png"/> title </h1>

CSS：

h1
{
    color: rgb(114, 159, 207);
    padding-bottom: 3px;
    border-bottom: 5px solid rgb(114, 159, 207);
    padding-left:0.3cm;
    margin-left: 0.9cm;

}

#htitle img
{

position: relative; 
top: 0.15cm;
right:1.5cm;
border: 1px

}

如何阻止图片移动我的标题？

Answer 1

你想要这样的东西吗？ https://jsfiddle.net/o2mxesua/1/

如果这就是你想要的，你需要做的就是用span替换你的h1，因为h1取整个行宽，然后以你想要的任何方式为你的span类分配字体大小和权重属性。

这是您的更新代码 -

HTML

<div>
  <img src="title.png"/>
  <span id="htitle">
  title 
  </span> 
</div>

CSS

#htitle
{
    color: rgb(114, 159, 207);
    padding-bottom: 3px;
    border-bottom: 5px solid rgb(114, 159, 207);
    padding-left:0.3cm;
    margin-left: 0.9cm;
    font-size: 4em;
}

#htitle img
{
  position: relative; 
  top: 0.15cm;
  right:1.5cm;
  border: 1px;
}

h1旁边的图标，位置为：relative

1 个答案: