HTML 和 svg 元素不是内联的

Question

我目前的情况是一个字段集与我页面上的另一个字段集内联。 post 的字段集包含一个 svg 圆圈和一些文本。

我的目标是让这两个相互内联，字段集的大小自适应，因为我想稍后更改给定的 / 文本和圆圈的颜色基于 returns 真或假的函数。

我当前的代码是这样的：

<div>
  <fieldset class="fieldset-auto-width">
    <legend>some legend</legend>
    <div>
      <svg height="32" width="32"><circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/></svg>
    </div>
    <span>some text</span>
  </fieldset>
</div>

JS-Fiddle to my code with CSS

在这一点上，我什至不确定是否需要第二个 div 来包装 svg 元素，因为我现在已经尝试了大约半小时。嵌套的 dif 在那里是因为我试图强制 svg 元素的最大尺寸，因为它占用了不需要的 space，即使 style="display: block"

现在我想要我的 svg 圈子和我的  内联。

我目前使用  而不是  的原因是因为 svg 下面有太多不需要的 space ，这在使用 [=13 时并不重要=] 而不是 .

编辑：错误的 jsfiddle link

Answer 1

给你。 div 是块元素。所以，你必须让它成为内联块。 vertical-align: middle 设置元素的垂直对齐方式

<div>
 <fieldset class="fieldset-auto-width" >
  <legend>some legend</legend>
   <div style="display: inline-block; vertical-align: middle">
    <svg height="32" width="32">
     <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
    </svg>
   </div>  
  <span>some text</span>
 </fieldset>
</div>

Answer 2

一个<div>默认是display: block。

如果您希望 div 的内容和 div 之后的元素相互内联……不要在此处放置 div。

<div>
 <fieldset class="fieldset-auto-width" >
  <legend>some legend</legend>
    <svg height="32" width="32">
     <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
    </svg>
  <span>some text</span>
 </fieldset>
</div>

Answer 3

不确定我是否完全理解您的问题，但您的 span 元素与 SVG 不在同一个容器中。由于您已将 SVG 元素设置为显示内联块，因此这对您的跨度没有影响。

要垂直对齐这两个元素，您可以在两个元素（svg 和 span）上使用 vertical-align: middle 并将 SVG 设置为 display:inline-block

已更新 fiddle：https://jsfiddle.net/L70oupcp/5/

      <div>
        <svg height="32" width="32">
           <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
        </svg>
        <span>some text</span>
      </div>

HTML <span> 和 svg 元素不是内联的

HTML <span> and svg element are not inline

html

css

svg

inline