html - 将图片与复选框对齐

Question

大家好，我遇到的主要问题不是让图片旁边的复选框而是将它们放在列中，两列带有带有复选框的图片，然后一列带有 cehckboxes。

我知道你看不到图片，但你会明白的

有什么建议吗？

代码

<div class="row">
                                  <div class="box1" style="vertical-align:top; padding-left:3px">
                                       <!-- Squared TWO -->
                                       <ul>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="modeler" id="squaredTwo"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredTwo"></label>
                                                </div>
                                                <img src="images/check-1.jpg" alt=""> 
                                            </li>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="v-modeler" id="squaredThree"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredThree"></label>
                                                </div>
                                                <img src="images/check-2.jpg" alt=""> 
                                            </li>
                                       </ul> 
                                    </div>  
                                    <div class="box2" style="vertical-align:top; padding-left:15px;">
                                        <ul>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="evolve" id="squaredfo"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredfo"></label>
                                                </div>
                                                <img src="images/check-3.jpg" alt=""> 
                                            </li>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="communicator" id="squaredfi"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredfi"></label>
                                                </div>
                                                <img src="images/check-4.jpg" alt=""> 
                                            </li>
                                       </ul> 
                                    </div>
                                    <div class="box3" style="padding-left:25px">
                                        <ul>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="analytics" id="squaredsi"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredsi"></label>
                                                </div>
                                                <img src="images/check-5.jpg" alt=""> 
                                            </li>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="collector" id="squaredei"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredei"></label>
                                                </div>
                                                <img src="images/check-6.jpg" alt=""> 
                                            </li>
                                            <li>
                                                <div class="squaredTwo">
                                                    <input type="checkbox" value="synergy" id="squaredni"  name="00Nw0000004kJyc"  />
                                                    <label for="squaredni"></label>
                                                </div>
                                                <img src="images/check-7.jpg" alt=""> 
                                            </li>
                                       </ul> 
                                    </div>
                                </div>

Answer 1

尝试将图像放在 div 中。还要确保使用 </img> 关闭图像标签。或 <img src="images/check-7.jpg" alt=""/>

Fiddle