跨度文本换行与第一行

Question

当发生换行时，我很难对齐跨度的第二行，与第一行对齐。

<div style="display: inline-block; vertical-align: middle">
<svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20">
<rect width="20" height="20" style="fill:rgb(0,167,206);"/>
<text x="50%" y="14" text-anchor="middle" fill="white" font-size="10">'
 +(+counter)+ '</text></svg></div>' + " "+ "<b>
<span style='margin-left:20px;'>" + data[i].metadata.LocationName+"</span></b>"

如何将第二行中的文本与第一行对齐。这是它的外观。任何帮助表示赞赏。显示的文本是来自服务的动态，因此我无法确定文本的长度。

Answer 1

显然，圈子/方块中的数字为float: left;。如果您可以访问它们，请删除display: inline-block并应用Exception in thread "main" java.util.NoSuchElementException at java.util.Scanner.throwFor(Scanner.java:862) at java.util.Scanner.next(Scanner.java:1485) at java.util.Scanner.nextInt(Scanner.java:2117) at java.util.Scanner.nextInt(Scanner.java:2076) at Main.main(Main.java:266) at Ideone.test(Main.java:72) at Ideone.test(Main.java:32) at Ideone.main(Main.java:23) 。这样可以防止后续文本在其下浮动。