首页 > 代码库 > display:inline-block居中方式

display:inline-block居中方式

2024-09-16 16:32:00   215人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>
    <style>
        .slider{
            width: 520px;
            height: 280px;
            overflow: hidden;
            position: relative;
        }
        .slider .img-list{
            width: 4000px;
        }
        .slider .img-list li{
            float: left;
        }
        .slider .img-list li img{
            width: 520px;
            height: 280px;
        }
        .slider .dots{
            position: absolute;
            bottom: 20px;
            width: 100%;/*父级宽度*/
            text-align: center;/*内容居中*/
        }
        .slider .dots .dot{
            width: 10px;
            height: 10px;
            background-color: #F00;
            border-radius: 50%;
            margin:0 2px;
            -webkit-box-shadow: 1px 2px 10px #000000;
            -moz-box-shadow: 1px 2px 10px #000000;
            box-shadow: 1px 2px 10px #000000;
            display: inline-block;/*转换为内联块级元素*/
            *dispaly:inline;
            *zoom:1;
            /*dipplay:inline-blok不兼容ie6，*内容兼容ie6*/
        }
        .slider .dots .dot.active{
            background-color: #ae0000;
        }
        .slider .arrow{
            display: inline-block;
            width: 20px;
            height: 40px;
            line-height: 40px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            text-decoration: none;
            color: #ffffff;
            text-align: center;
        }
        .slider .arrow:hover{
            background: rgba(0,0,0,0.8);
        }
        .slider .arrow.right{
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="img-list cf">
            <li><img src="https://img.alicdn.com/tfs/TB1ILwrQFXXXXXtXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1F_ZYQFXXXXcSXpXXSutbFXXX.jpg" alt=""/></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1WWZEQFXXXXXoXpXXSutbFXXX.jpg" alt=""/></li>
            <li><img src="https://img.alicdn.com/tfs/TB102DLQFXXXXaFXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>
        </ul>
        <div class="dots">
            <a href="#none" class="dot"></a>
            <a href="#none" class="dot active"></a>
            <a href="#none" class="dot"></a>
            <a href="#none" class="dot"></a>
        </div>
        <a class="arrow" href="#none"><</a>
        <a class="arrow right" href="#none">></a>
    </div>
</body>
</html>

 

display:inline-block居中方式


联系
我们