Javascript width of span element

Question

Я создаю через String некоторые DOM-Elements и назначаю его через innerHTML в div. Теперь мне нужна гибкая ширина элемента span (span_homebase). То, что я испытываю, это то, что иногда (для меня это выглядит случайным образом) он возвращает другую ширину, чем ожидалось. Мне нужна ширина этого элемента span, потому что после этого в той же строке есть информационная кнопка, но ширина пролета может быть разной. Поэтому я использую ширину элемента span в качестве поля для информационной кнопки. Код выглядит следующим образом. Я искал асинхронный обработчик innerHTML, но в другом сообщении кто-то сказал, что он не требуется, потому что он назначается мгновенно. Есть ли мысли, что попробовать? Потому что информация сейчас иногда находится в нужном месте, а иногда нет.

string = string + "<span id ='span_homebase'>" + homebaseCity + "</span>"; 
string = string + "<div class='section-end'></div>"; 
element.innerHTML = string; 
var marginInfoHomebase = document.getElementById('span_homebase').offsetWidth + 20; 
document.getElementById("information_button_homebase").style.margin = "5px 0 0 " + marginInfoHomebase + "px"; 

Теперь, если открыть соответствующий сайт для меня иногда marginInfoHomebase иногда возвращает 108, а иногда и 183, даже если такое же значение присваивается охватывать элемент. Очень странно. Есть предположения?

EDIT: Рабочий пример:

function createHomeSettingsView(settingsA){ 
    var element = document.getElementById("table-settings"); 
    var string = ""; 
    for(var i = 0; i < settingsA.length; i++){ 
     for(var z = 0; z < settingsA[i].length; z++){ 
      if(i == 1){ 
       //Notification buttons 
       if(z == 1){ 
        //homebase setting 
        if(window.localStorage.getItem("switch_homebase") == 1){ 
         //homebase on 
         var homebaseCity = settingsA[i][z] + ": " + window.localStorage.getItem("homebase_loc"); 
         string = string + " \ 
         <div class='row' style='height:100px;' id='settings-sec-"+ i +"-row-" + z +"'> \ 
          <div class='text'> \ 
           <span id='span_homebase'>" + homebaseCity + "</span> \ 
          </div> \ 
          <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\ 
          <div id='handleAutoSwitcherHomebase'></div>\ 
          <div id='showRadiusRangeHomebase'>Radius: 30km</div>\ 
          <input class='sliders' id='changeRadiusRangeHomebase' type='range' min='5' max='100' step='5' oninput='handleChangeHomebase(this.value)' onchange='handleInputHomebase(this.value)' >\ 
         </div>"; 
        } 
        else{ 
         //homebase off 
         string = string + " \ 
         <div class='row' id='settings-sec-"+ i +"-row-" + z +"'> \ 
          <div class='text'>\ 
           <span id='span_homebase'>" + settingsA[i][z] + "</span> \ 
          </div> \ 
          <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\ 
          <div id='handleAutoSwitcherHomebase'></div>\ 
         </div>"; 
        } 
       } 
      }   
     } 
    } 
    element.innerHTML = string; 
    var marginInfoHomebase = document.getElementById("span_homebase").offsetWidth + 25; 
    var marginText = "5px 0 0 " + marginInfoHomebase + "px"; 
    console.log("Span: " + marginInfoHomebase); 
    document.getElementById("information_button_homebase").style.margin = marginText; 
} 

CSS:

.container .table-settings{ 
    top: 64px; 
    position: absolute; 
    padding:0; 
    left: 0; 
    right: 0; 
    bottom:0; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
    background-color: #ECEBF3; 
} 

.container .table-settings .row{ 
    background-color: white; 
    padding-top: 14px; 
    height:50px; 
    border-bottom: 1px solid LightGray; 
} 

.container .table-settings .row .text{ 
    margin-left: 15px; 
    color: black; 
    float: left; 
} 

#span_homebase{ 
    display: inline-block; 
} 

Answer 1

По умолчанию используется оболочка элемент не имеет размерности, потому что его CSS дисплей свойство рядный.

Если вы хотите дать ему ширину, вы должны изменить это свойство на inline-block.

<style> 
span { 
    display: inline-block ; 
} 
</style> 

Теперь вы можете играть с его размерами.