flex输入框布局

Document

图
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .demo {
        display: flex;
    }
   
    input {
        /* flex: 1; */
        width: 300px;
        border: 1px solid #b7b7b7;
        border-right: 0;
        border-left: 0;
    }
   
    .icon {
        width: 20px;
        height: 20px;
        color: #fff;
    }
   
    .tip {
        align-items: center;
        display: flex;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid #b7b7b7;
        border-right: 0;
        background: rgba(236, 223, 223, 0.4);
    }
   
    .but {
        /* */
        background: rgba(236, 223, 223, 0.4);
        color: #fff;
        width: 80px;
    }
</style>

<body>
    <div class="demo">
        <span class="tip"><span class="icon">图标</span></span>
        <input class="" type="text">
        <button class="but" style="border: 1px solid #b7b7b7; border-left: 0;">search</button>
    </div>
</body>

</html>

　　

posted @ 2022-03-14 08:37  33的男孩  阅读(90)  评论(0)    收藏  举报