如何在更改/添加文本后使单选按钮保持静态

Question

我有一个单选按钮（列表），单击``下一步''按钮后会更改文本（使用JavaScript）。文本会更改，但是当文本变长时对齐会关闭，这将使其无法保持恒定位置。 / p>

即

之后的对齐（向左移动一些位置）

Javascript（radio是定义为“ 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：scale在具有多个元素的容器上缩放，并且要非常注意该位置：绝对会经常咬住您...

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"/>