스팬 텍스트 줄 바꿈을 첫 줄에 맞 춥니 다

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을 대신 적용하십시오. 이렇게하면 후속 텍스트가 그 아래에 뜨지 않습니다.