如何将我的 SVG 与文本内联？

Question

我有一个 SVG，我想将它放在一些内联文本旁边，作为导航栏的一部分，如下所示：

现在的问题是它没有与 SVG 内联。它看起来像这样，从导航栏溢出：

这是我的 HTML 的 sn-p（它有点大，所以请点击“显示代码 sn-p”）：

.navbar {
  height: 95px;

  margin: 0;
  padding-left: 50px;
  padding-right: 50px;

  box-shadow: 0 3px 4px grey;

  list-style-type: none;
}

.navbar > li {
  height: 100%;

  float: right;
}

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;

  margin: 10px;

  float: left;

  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

我在文本的span 上使用position: absolute 将其设置为所需的内联状态。但这会使文本超出li 的范围。

如何定位与 SVG 内联的文本（没有 position: absolute）？我希望 li 在其范围内包含 SVG 和文本。

Answer 1

您的主要问题是，出于某种原因，您将 <li> 设置为较窄的宽度：

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;
}

只需去掉那些宽度和高度值。你不需要它们。该宽度和高度应改为应用于 SVG。

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}

vertical-align 用于使文本的顶部与 SVG 的顶部对齐。此外，我们将文本 line-height: 75px; 赋予它，以便它自动以 SVG 垂直居中。

最终结果

（去掉一些其他不必要的部分后）

.navbar {
  height: 95px;
  margin: 0;
  padding-left: 50px;
  padding-right: 50px;
  box-shadow: 0 3px 4px grey;
  list-style-type: none;
}

.navbar > .navbar-logo {
  margin: 10px;
  float: left;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  line-height: 75px;
}

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}




.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

Answer 2

一种可能的解决方案是在 .navbar-logo 类中使用white-space: nowrap;。这样可以避免换行。

.navbar {
  height: 95px;

  margin: 0;
  padding-left: 50px;
  padding-right: 50px;

  box-shadow: 0 3px 4px grey;

  list-style-type: none;
}

.navbar > li {
  height: 100%;

  float: right;
}

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;
  white-space: nowrap;
  margin: 10px;

  float: left;

  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

更新

这里是使用弹性盒模型的解决方案。这为您提供了更大的灵活性。
如果不需要，您可以删除中间和末端包装。

.navbar {
    height: 95px;
    margin: 0;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 0 3px 4px grey;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    overflow: hidden;
}

.navbar-set {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -ms-flex-item-align: start;
        align-self: flex-start;
}

.navbar-set a {
    text-decoration: none;
    color: black;
    line-height: 95px;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
}

.navbar-set.start {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    text-align: left;
}

.navbar-set.middle {
    text-align: center;
}

.navbar-set.end {
    text-align: right;
}

.navbar > .navbar-logo svg {
  width: 75px;
  height: 75px;

  margin: 10px;

  float: left;
}





.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<div class="navbar">
  <div class="navbar-logo navbar-set start">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <a href="#" alt="">Text</a>
  </div>
    <div class="navbar-set middle">
        <a href="#" alt="">middle 1</a>
        <a href="#" alt="">middle 2</a>
    </div>   
    <div class="navbar-set end">
        <a href="#" alt="">Mend 1</a>
        <a href="#" alt="">end 2</a>
    </div>  
</div>

Answer 3

许多可能的解决方案之一：

• 让li 的宽度变大，我做到了 100%。
• 为您的 SVG 设置宽度。
• 同时制作 SVG 和文本 float: left。
• 然后给文本一个padding-top，让它到达你想要的位置。

.navbar {
      height: 95px;

      margin: 0;
      padding-left: 50px;
      padding-right: 50px;

      box-shadow: 0 3px 4px grey;

      list-style-type: none;
    }

    .navbar > li {
      height: 100%;

      float: right;
    }

    .navbar > .navbar-logo {
      width: 100%;
      height: 75px;

      margin: 10px;

      float: left;

      font-family: 'Oswald', sans-serif;
      font-size: 50px;
    }

    .logo-compass-frame {
      fill: none;
      stroke: black;
      stroke-width: 20;
      stroke-linecap: round;
      stroke-miterlimit: 10;
    }

    .logo-compass-north, .logo-compass-south {
      stroke: black;
      stroke-width: 8;
      stroke-miterlimit: 10;
    }

    .logo-compass-south {
      fill: none;
    }

    .logo-compass-center {
      fill: black;
      stroke: black;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-miterlimit: 10;
    }
  
    
    #svg {
      width: 75px;
      float: left;
    }
    
    .text {
      float: left;
      padding-top: 15px;
    }
    

    <ul class="navbar">
      <li class="navbar-logo">
        <svg id="svg" x="0px" y="0px" viewBox="0 0 272.6 272.6">
          <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
          <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
          <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
          <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
        </svg>
        <span class="text">Text</span>
      </li>
    </ul>

Answer 4

您的问题是要么将navbar-logo 类放在错误的位置，要么将高度和宽度放在错误的位置。您正在将 75px 尺寸应用于徽标和文本的容器。这样做会使文本换行到下一行。将尺寸移到 SVG 上，文本会放在它旁边：

值得注意的代码是：

.navbar > .navbar-logo > svg{
  width: 75px;
  height: 75px;
  display: inline-block;
}

.navbar {
  height: 95px;

  margin: 0;
  padding-left: 50px;
  padding-right: 50px;

  box-shadow: 0 3px 4px grey;

  list-style-type: none;
}

.navbar > li {
  height: 100%;

  float: right;
}

.navbar > .navbar-logo {
  margin: 10px;
  height: 75px;
  float: left;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

.navbar > .navbar-logo > svg{
  width: 75px;
  display: inline-block;
}

.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

旁注： 文字需要稍作调整，但似乎超出了问题的范围。