我怎样才能让单选按钮在文本上保持静态 change/add

Question

我有一个单选按钮（列表），单击 'next' button.The 文本会更改文本（使用 JavaScript），但当文本变长时对齐会关闭使其不会保持在固定位置。

即

对齐之后（向左移动了一些地方）

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 并且要非常清楚 position: 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"/>

我怎样才能让单选按钮在文本上保持静态 change/add

How can i keep radio button static upon a text change/add

html

javascript

css

button

radio