将内容推到左侧以显示删除按钮

Question

我该怎么做呢;

这是我目前的wip：

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>

暂时隐藏删除按钮。

应该发生什么，它会被揭示，而其他内容被“推离”到与此元素相同的宽度。但是，我不确定如何继续。我使用display：flex并尝试了一些定位，但它没有用。

Answer 1

在这里： -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您已为此解决方案添加了jQuery ...