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

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>