* { margin:0; padding:0; } .fileImg { padding:20px; background:#ececec; overflow:hidden; width:800px; margin:20px auto; } .fileImg ul li { position:relative; border:1px solid #c5c5c5; width:50px; height:50px; float:left; margin-right:50px; list-style-type:none; background:#f4f5f7; border-radius:5px; } .fileImg ul li input { position:absolute; z-index:3; top:0; left:0; width:100%; height:100%; opacity:0; -webkit-tap-highlight-color:rgba(0,0,0,0); } .fileImg ul li:after { position:absolute; content:' '; display:block; width:2px; height:30px; background:#cdcdcd; left:50%; margin-left:-1px; top:50%; margin-top:-15px; z-index:2; } .fileImg ul li:before { position:absolute; content:' '; display:block; top:50%; margin-top:-1px; z-index:2; width:30px; height:2px; background:#cdcdcd; left:50%; margin-left:-15px; } .fileImg ul li span:nth-child(2) { display:none; width:50px; height:50px; position:absolute; left:0; top:0; background:#f4f5f7; cursor:pointer; border-radius:5px; overflow:hidden; z-index:3; } .fileImg ul li span:nth-child(2):after { content:'x'; display:block; z-index:4; width:20px; height:20px; line-height:16px; color:#fff; background:red; border-radius:50%; position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-10px; text-align:center; } .fileImg ul li span:nth-child(2) img { width:100%; position:absolute; left:0; top:50%; }