zoukankan      html  css  js  c++  java
  • css行内块元素的使用技巧 可以利用text-align实现水平居中

    <!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;
            }
    
            .box {
                text-align: center;
            }
    
            .box a {
                display: inline-block;
                 36px;
                height: 36px;
                background-color: #f7f7f7;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 36px;
                text-decoration: none;
                color: #333;
            }
    
            .box .prev,
            .box .next {
                 85px;
            }
    
            .box .current,
            .box .elp {
                background-color: #fff;
                border: none;
            }
    
            .box input {
                 45px;
                height: 36px;
                border: 1px solid #ccc;
                outline: none;
    
            }
    
            .box button {
                 60px;
                height: 36px;
                background-color: #f7f7f7;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <a href="" class="prev">&lt;&lt;上一页</a>
            <a href="" class="current">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="" class="elp">...</a>
            <a href="" class="next">下一页&gt;&gt;</a>
            到第
            <input type="text">
            页
            <button>确定</button>
        </div>
    </body>
    </html>
    

  • 相关阅读:
    不用if/else swich for while实现累加
    1.java数据结构
    青蛙跳台阶问题
    next与nextLine
    9.遗传算法
    Docker镜像管理
    Docker镜像管理
    CentOS 6.7安装Docker
    CentOS 6.7安装Docker
    数字三角形_递归_递推(动态规划)
  • 原文地址:https://www.cnblogs.com/qjuly/p/13532921.html
Copyright © 2011-2022 走看看