Question

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

我的目标是让这两个内联彼此内联，字段集在大小上进行调整，因为我想稍后更改给定的 / 文本和圆圈的颜色在返回true或false的函数上。

我目前的代码是：

<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

在这一点上，我甚至不确定是否需要包装svg元素的第二个div，因为我现在试图让它正确约半个小时。嵌套的差异是因为我试图强制svg元素的最大大小，因为它占用了不必要的空间，即使使用style="display: block"

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

我目前使用而不是的原因是因为svg下面有太多不需要的空间，这在使用代替{{时并不重要1}}。

编辑：错误的jsfiddle链接

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以显示：inline-block

更新了小提琴：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元素不是内联的

3 个答案: