将 SVG 与 html 文本标题内联答案

【问题标题】：Place SVG in-line with html text headers将 SVG 与 html 文本标题内联
【发布时间】：2016-09-05 03:03:08
【问题描述】：

我想在这两个页面链接的左侧放置一个 SVG 超链接：

该站点使用 Jekyll 并基于 Poole 构建。该站点现在几乎相同，因此可以看到任何其他 CSS 详细信息in Poole's repo

我正在努力解决如何在下面的标头类中放置图像或 svg。我希望徽标与页面导航内联。下面的 img 标签目前什么都不显示。

.masthead {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 3rem;
}
.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: $gray-4;
}
.masthead-title a {
  color: inherit;
  }
.masthead-title small {
    font-size: 75%;
    font-weight: 400;
    opacity: .5;
  }

<header class="masthead">
  <h3 class="masthead-title">

    <a href="{{ site.baseurl }}/" title="Home">{{ <img src="/assets/logo_small.svg" height="25" width="100"/> }}</a> <!--site.title-->

    {% for page in site.pages_list %}
      &nbsp;&nbsp;&nbsp;<small><a href="{{ page[1]  }}">{{ page[0] }}</a></small>
    {% endfor %}

  </h3>
</header>

【问题讨论】：

如果您在浏览器中打开开发者工具，是否表明它可以归档 svg 文件？
Tangent：通常认为在 CSS 中添加 .masthead-title small {display: inline-block; padding-left: 20px;} 之类的东西是更好的做法，而不是使用一堆不间断的空格——这将使您的标记更易于维护，并调整布局会更容易
另外，请查看stackoverflow.com/help/mcve 以获取有关如何创建最小、可验证示例的说明，并考虑编辑您提供的代码。由于 SO 无法运行 Liquid，{{ }} 和 {% %} 函数可以被虚拟内容替换。您可以省略任何与问题不严格相关的 CSS - 在这种情况下，可能会省略所有 CSS，除非在您的测试中您发现存在问题

标签： html css sass jekyll

【解决方案1】：

在您提供的代码中，看起来问题在于您将图像放入 Liquid 变量中。应该是<img ...>，而不是{{ <img ... > }}

这是一个最小的 sn-p，它会删除与您的问题无关的所有内容，并在您的链接中显示 <img>。

.masthead img {
  width: 100px;
  height: 25px;
}

<header class="masthead">
  <h3>

    <a href="">
      <img src="/assets/logo_small.svg" />
    </a>

    <small>
      <a href="">link 1</a>
    </small>
    
    <small>
      <a href="">link 2</a>
    </small>

  </h3>
</header>

【讨论】：

我如何将它与其他页面链接保持一致？
我添加了一个最小的sn-p，您可以在其中看到图像与其他链接一致。如果从{{ }} 中取出<img> 并不能为您解决问题，那么还有其他一些冲突的css