定位跨度在 div 内

Question

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

这里我想把减号图标放在左上角（我用画图编辑了下图），

我已经包含了我的代码below.Here我试图将负跨度的位置设置为绝对并且它会到达top.And的角落我不希望它happen.Is 有什么方法可以做到这一点吗？，我真的很感谢你 help.I 一整天都在努力做到这一点。

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

定位跨度在 div 内

Positioning spans inside divs

html

css

css-position