002_x号Css实现及弹性布局
一、效果如下:
二、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .close { position: relative; display: inline-block; top: 50%; margin-top: -10px; width: 20px; height: 20px; background-color: rgb(23, 159, 196); } .close:before, .close:after { position: absolute; left: 10px; content: ‘ ‘; height: 21px; width: 2px; background-color: red; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } #selectedItem { display: flex; float: left; justify-content: left; width: auto; height: 32px; line-height: 32px; border: 2px solid red; } </style> </head> <body> <div id="selectedItem"> 苹果<div href="#" class="close"></div> </div> <div id="selectedItem"> 苹果<div href="#" class="close"></div> </div> </body> </html>
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18