html - 向左推内容以显示删除按钮

Question

我该怎么做？

这是我目前的在制品:

https://jsfiddle.net/Lg0wyt9u/967/

   <li>
      <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
      <div class='details'>
        <div class='date'>date</div>
        <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
       </div>
       <div class='value'>1.2</div>   
     <div class='slide-in'>
       DELETE
     </div>
   </li>

删除按钮暂时隐藏。

应该发生的是，它被显示出来，并且其他内容被推到“ Canvas 外”到与该元素相同的宽度。但是，我不确定如何进行。我使用 display:flex 并尝试了一些定位，但没有成功。

Answer 1

给你:-

$(document).ready(function(){
  $('.list ul li .rw').click(function(){
    	console.log(this);
      $(this).css("right","65px");
      $('.slide-in').css("display","block");
  })
})

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.rw{
  padding-top: 20px;
  width:100%;
  cursor:pointer;
  position:absolute;
  padding-bottom: 20px;
  border-bottom: 1px solid #a1d1b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type {
  padding-right: 15px;
  flex: 0 0 50px;
  background: green;
}

.type i {
  font-size: 40px;
}

.details {
  flex: 1;
  overflow: hidden;
  font-family: "Courier New";
}

.address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value {
  padding-left: 15px;
  font-size: 55px;
}

.date {
  font-weight: bold;
  margin-bottom: 5px;
}
.slide-in {
  width:65px;
  background: red;
  color: #fff;
  display:none;
}

<div id="container">
  <div class="list">
     <ul>
       <li>
       <div class="rw">
          <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
          <div class='details'>
            <div class='date'>date</div>
            <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
           </div>
           <div class='value'>1.2</div>
            <div class='slide-in'>
           DELETE
         </div>
           </div>
        
             
       
       </li>
     </ul>
  </div>
</div>

您已经为该解决方案包含了 jQuery...