文本在两个跨度中不是彼此相邻的

Question

我有两个跨度的文本，但是它们不是彼此相邻的。 （最后一个文本在上一个文本的下方，但应在前一个文本的旁边。）

这是打印文本的代码：

var display_options_1 = `

         <td><span id="A${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[0]}</span><span>${question.option_text[0]}</span></td>
         <td><span id="B${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[1]}</span><span>${question.option_text[1]}</span></td>`;

var display_options_2 = `

         <td><span id="C${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[2]}</span><span>${question.option_text[2]}</span></td>
         <td><span id="D${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[3]}</span><span>${question.option_text[3]}</td>`;

这是完整的代码，带有可用的演示 ！

更新1

用Static Void的Answer来解决问题更容易，但是我只需要选择${question.options[]}而不是${question.option_text[0]} ...

Answer 1

仍在编辑一分钟http://jsbin.com/zizelebiko/1/edit?js，输出

  var display_options_1 = `

        var display_options_1 = `

        <td><div class="${question.questionId}"><span id="A${i}"  onclick="onSelect(event)">${question.options[0]}</span><span>${question.option_text[0]}</span></div></td>
        <td><div class="${question.questionId}"><span id="B${i}"  onclick="onSelect(event)">${question.options[1]}</span><span>${question.option_text[1]}</span></div></td>
    </td>`;
var display_options_2 = `

        <td><div class="${question.questionId}"><span id="C${i}"  onclick="onSelect(event)">${question.options[2]}</span><span>${question.option_text[2]}</span></div></td>
        <td><div class="${question.questionId}"><span id="D${i}"  onclick="onSelect(event)">${question.options[3]}</span><span>${question.option_text[3]}</span></div></td>
    </td>`;

Answer 2

像这样更改它： <td><span id="A${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[0]}${question.option_text[0]}</span></td>

只需要一个跨度。