定位跨度在 div 内

Question

这是我的代码的当前输出，

这里我想像这样将减号图标放置在左上角（我使用paint编辑了以下图像），

我在下面包含了我的代码。在这里我尝试将负跨度的位置设置为绝对值，它会转到顶部的角落。我不希望它发生。有什么办法可以做到这一点?，我真的很感谢你的帮助。我正在努力做一整天。

    <div class="left-bar-sm">
        <div class="left-bar-sm-header">
           Quantity (0)        
        </div>      
        
        <div class="left-bar-sm-body">
           <div class="left-bar-sm-nested">

             <span>Samaposha</span>     
             <br>
             <span>2 x Rs 28.00 = Rs 56.00</span>
             <span style="float: right;"><i class="fas fa-minus-circle"></i> <i class="fas fa-trash"></i></span>
           </div>      
     </div>

.left-bar-sm-header {
  
  background-color: #333333;
  width: auto;
  height: 50px;
  margin-top: 5px;
  border: 1px solid #595E57;
  text-align: center;
  padding: 5px;
  font-size: 18px;
  overflow-x: auto;
}

.left-bar-sm-body {

  height: 450px;
  border: none;
  border-bottom: 2px dashed #595E57;
  overflow-x: auto;
}

.left-bar-sm-nested {

  margin-top: 5px;
  background-color: #333333;
  border: 1px solid #595E57;
  padding: 20px;
}

Answer 1

在这种情况下，您可以使用 CSS flex。我稍微更改了您的 HTML。

试试这个：

.left-bar-sm {
  background: #252525;
  padding: 10px;
  color: #fff;
}


.left-bar-sm-header {
  background-color: #333333;
  width: auto;
  height: 50px;
  margin-top: 5px;
  border: 1px solid #595E57;
  text-align: center;
  padding: 5px;
  font-size: 18px;
  overflow-x: auto;
}

.left-bar-sm-body {
  height: 450px;
  border: none;
  border-bottom: 2px dashed #595E57;
  overflow-x: auto;
}

.left-bar-sm-nested {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  background-color: #333333;
  border: 1px solid #595E57;
  padding: 20px;
}

.left-bar-sm-nested > div {
  display: flex;
  justify-content: space-between;
}

.left-bar-sm-nested > div span {
  line-height: 25px;
}

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <div class="left-bar-sm">
    <div class="left-bar-sm-header">
      Quantity (0)        
    </div>      

    <div class="left-bar-sm-body">
      <div class="left-bar-sm-nested">
        <div>
          <span>Samaposha</span>
          <span style="float: right;"><i class="fas fa-minus-circle"></i><span>
        </div>
        <div>
          <span>2 x Rs 28.00 = Rs 56.00</span>
          <span><i class="fas fa-trash"></i></span>
        </div>
      </div>      
    </div>
  </div>

Answer 2

您可以将文本和右侧图标包装在两个 div 中。 然后使用flex修改布局显示左右两边。

.left-bar-sm-header {
  
  background-color: #333333;
  width: auto;
  height: 50px;
  margin-top: 5px;
  border: 1px solid #595E57;
  text-align: center;
  padding: 5px;
  font-size: 18px;
  overflow-x: auto;
}

.left-bar-sm-body {

  height: 450px;
  border: none;
  border-bottom: 2px dashed #595E57;
  overflow-x: auto;
}

.left-bar-sm-nested {

  color: #fff;
  margin-top: 5px;
  background-color: #333333;
  border: 1px solid #595E57;
  display:flex;
}

.right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
 }
 
 .left {
     padding: 20px;
     flex: 1;
   }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

 
 
 
 <div class="left-bar-sm">
        <div class="left-bar-sm-header">
           Quantity (0)        
        </div>      
        
        <div class="left-bar-sm-body">
           <div class="left-bar-sm-nested">

             <div class="left">
               <span>Samaposha</span>     
               <br>
               <span>2 x Rs 28.00 = Rs 56.00</span>
             </div>
             <div class="right"><i class="fas fa-minus-circle"></i> <i class="fas fa-trash"></i></div>
           </div>      
     </div>