行内块的巧妙运用（HTML、CSS）

Love The Way You Lie 2023-10-03 13:34 14阅读 0赞

### 行内块的巧妙运用（HTML、CSS） ###

<!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>行内块的巧妙运用</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                text-align: center;
            }
    
            .box a {
                /*  块级元素没有高度，需要转换为行内块，才可以设置高度 */
                display: inline-block;
                width: 36px;
                height: 36px;
                background-color: #f7f7f7;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 36px;
                text-decoration: none;
                color: #333;
                font-size: 14px;
    
            }
    
            .box .prev,
            .box .next {
                width: 85px;
            }
    
            .box .current,
            .box .elp {
                background-color: #fff;
                border: none;
                border: 1px #ccc solid;
            }
    
            .box input {
                height: 36px;
                width: 45px;
                border: 1px solid #ccc;
                outline: none;
            }
    
            .box button {
                width: 60px;
                height: 36px;
                background-color: #f7f7f7;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
    
            <a href="#" class="prev"><<上一页</a>
            <a href="#">1</a>
            <a href="#" class="current">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#" class="elp">...</a>
            <a href="#" class="next">>>下一页</a>
            到第
            <input type="text">
            页
    
            <button>确定</button>
        </div>
    </body>
    
    </html>