Question

我有这样的结构：

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </div>
   <div class="photo">
       <img src=".././uploads/images/avatar/1.png">
   </div>
</td>

我想在同一行上同时添加复选框和图像，但是在另一行上得到图像，我该如何解决？

Answer 1

使用display: inline-block：

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1" style="display:inline-block">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </div>
   <div class="photo" style="display:inline-block">
       <img src=".././uploads/images/avatar/1.png">
   </div>
</td>

如果有很多这些，可以制定CSS规则：

.form-check, .photo {
display: inline-block
}

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </div>
   <div class="photo">
       <img src=".././uploads/images/avatar/1.png">
   </div>
</td>

Answer 2

问题是因为div是一个块元素，如果将其替换为span，则默认情况下会换行，

<td class="sorting_1" tabindex="0">
    <span class="form-check" data-user-id="1">
       <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
           <span class="form-check-sign">
               <span class="check"></span>
           </span>
       </label>
   </span>
   <span class="photo">
       <img src=".././uploads/images/avatar/1.png">
   </span>
</td>

Answer 3

尝试以下操作：

<td class="sorting_1" tabindex="0">
    <div class="form-check" data-user-id="1">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value=""> 
            <span class="form-check-sign">
                <span class="check"></span>
            </span>
        </label>
        <img src=".././uploads/images/avatar/1.png" class="photo">
    </div>
</td>

Answer 4

这是因为image元素位于“ div”内部，并且浏览器将div作为[block element]作为默认设置，因此您可以： 1-将img下移到跨度以下 2-将div.photo样式（内联样式或CSS文件内）更改为：.photo {display：inline-block}

无法在单元格的同一行上添加两个元素

4 个答案: