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

编辑：所以我知道在上面的代码中我真的列出了图像，然后是答案，然后是另一个图像等。我所追求的是图像然后在右边，答案，然后在下面那个下一个image ...等等。不确定我是否需要嵌入更多行，创建表格，使用'pull-left'和'pull-rights'等。

Answer 1

使用标签和标签，你可以创建一个表格感觉你在jsfiddle中提供的内容，我的建议是，为了避免让资源有一个丛生的感觉来实现CSS并设置一些填充所以一切都是整齐。

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

            <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，应该有所帮助。

编辑：添加一些TR标签，旁边是TD标签，让它们彼此完美地坐在一起。

Answer 2

如果您不想使用表格结构，以下是代码。

<div class="row">
    <div class="col-lg-8">
        <!-- answers -->
        <div class="row">
            <img id="answer-1" class="img-responsive answer-number col-xs-2" src="http://placehold.it/50x50">
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="answer 1">
            </div>
        </div>
        <div class="row">
            <img id="answer-2" class="img-responsive answer-number col-xs-2" src="http://placehold.it/50x50">
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="answer 2">
            </div>
        </div>
        <div class="row">
            <img id="answer-3" class="img-responsive answer-number col-xs-2" src="http://placehold.it/50x50">
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="answer 3">
            </div>
        </div>
        <div class="row">
            <img id="answer-4" class="img-responsive answer-number col-xs-2" src="http://placehold.it/50x50">
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="answer 4">
            </div>
        </div>
        <div class="row">
            <img id="answer-5" class="img-responsive answer-number col-xs-2" src="http://placehold.it/50x50">
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="answer 5">
            </div>
        </div>
        <div class="row">
            <img id="answer-6" class="img-responsive answer-number col-xs-2" src="http://placehold.it/50x50">
            <div class="col-xs-10">
                <input type="text" class="form-control" placeholder="answer 6">
            </div>
        </div>
    </div>
</div>
<!--row-->

连续两个项目

2 个答案: