Как сохранить радио-кнопку статичной при изменении / добавлении текста

Question

У меня есть переключатель (список), который изменяет тексты (используя JavaScript) при нажатии на кнопку «Далее». Текст изменяется, но выравнивание отключается, когда текст становится длиннее, что не позволяет ему оставаться в постоянной позиции.

то есть

Выравнивание после (сдвинуто на несколько мест влево)

Javascript (радио - этопеременная, определенная как'var '): radio[0].nextSibling.textContent = "We can’t explore ourselves beyond our knowledge";

HTML / CSS:

<div  style="position:absolute;transform: scale(2);top:80vh;left:20vw">
         <input type='radio' name='rblist1' value='0'> <br> 
         <input type='radio' name='rblist1' value='1'> <br> 
         <input type='radio' name='rblist1' value='2'>
           </div>

Любая помощь будет отличной! Спасибо

Answer 1

Пропустите текущий стиль и структурируйте свои радиостанции по меткам.Тогда браузеры узнают, что указанный текст принадлежит радио, и радио активируется при нажатии на текст, а также.Держитесь подальше от использования transform: масштабируйте контейнеры с несколькими элементами и помните, что положение: absolute очень часто будет кусать вас в ...

function changeText(){
  $("label>span").eq(1).text("This is an even longer text wich will test the structure of the HTML");
}

.transformScale2{
 transform: scale(2); 
}

.inputRadioContainer{
margin-bottom: 10px;
font-size: large;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="inputRadioContainer">
    <label>
      <input type='radio' name='rblist1' value='0' class="transformScale2">
      <span>This is the label with a long text</span>
  </label>
  </div>
  <div class="inputRadioContainer">
    <label>  
      <input type='radio' name='rblist1' value='1' class="transformScale2">
      <span>This is the label</span>    
  </label>
  </div>
  <div class="inputRadioContainer">
    <label>  
      <input type='radio' name='rblist1' value='2' class="transformScale2">
      <span>This is the label</span>
  </label>
  </div>
 </div>
 
 <input type="button" onClick="changeText()" value="Click me"/>