跨度文本换行与第一行对齐

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;。如果您可以访问它们，请删除float: left;，然后应用display: inline-block。这将防止随后的文本在其下浮动。