html - 连续两个元素

Question

我正在尝试为一个游戏实现一个答题板，其中一列有 6 行，每行有两个元素。第一个是答案编号(实际上是数字的图像)，然后是我将在其中显示答案的文本字段，第三是金额(实际上我可能会在文本字段中使用徽章或附件)。

无论如何，我似乎无法做到正确。当我尝试类似下面的内容时，文本输入会在图像下方显示答案编号。我想要一种表格化的感觉，但不确定表格是否是正确的方法。

<div class="row">
  <div class="col-lg-8">
    <!-- answers -->
    <img id="answer-1" class="img-responsive answer-number" src="../img/1.png" height="100px" width="100px">
    <input type="text" placeholder="answer 1">
    <img id="answer-2" class="img-responsive answer-number" src="../img/2.png" height="100px" width="100px">
    <input type="text" placeholder="answer 2">
    <img id="answer-3" class="img-responsive answer-number" src="../img/3.png" height="100px" width="100px">
    <input type="text" placeholder="answer 3">
    <img id="answer-4" class="img-responsive answer-number" src="../img/4.png" height="100px" width="100px">
    <input type="text" placeholder="answer 4">
    <img id="answer-5" class="img-responsive answer-number" src="../img/5.png" height="100px" width="100px">
    <input type="text" placeholder="answer 5">
    <img id="answer-6" class="img-responsive answer-number" src="../img/6.png" height="100px" width="100px">
    <input type="text" placeholder="answer 6">
  </div>
</div><!--row-->

编辑:所以我知道在上面的代码中，我实际上是在列出图像，然后是答案，然后是另一张图像等。我所追求的是图像，然后是右边的答案，然后是下一个图片...等。只是不确定我是否需要嵌入更多行、创建表格、使用“向左拉”和“向右拉”等。

Answer 1

使用标签和标签，您可以为您在 jsfiddle 中提供的内容创建表格感觉，我的建议是避免让资源有聚集的感觉来实现 CSS 并设置一些填充，这样一切都是整洁。

http://jsfiddle.net/vk72t/1/ <-- 更新了一些标签。

            <table>
            <tr>
                <td>
                <img id="answer-1" class="img-responsive answer-number" src="../img/1.png" height="100px" width="100px">
                <input type="text" placeholder="answer 1">
                    </td>
            </tr>
        </table>

编辑更新了我的示例。

最后 http://www.w3schools.com/html/html_tables.asp , 应该会有一些帮助。

编辑:在你的 TD 标签旁边添加一些 TR 标签，让它们很好地放在彼此下面。