css如何实现兼容性的元素不确定多少的情况下两端对齐？

问题描述

问 题

如上图的小方块（或者是文字标题）不确定多少，要实现两端对齐的效果？
虽然css3可以实现效果，但是我的页面是用在pc端的，不知道有什么好的方法？

解决方案

可以借助text-align:justify和伪元素实现

<div class="container">
        <div class="justify">
            <i>1</i>
            <i>2</i>
            <i>3</i>
            <i>4</i>
             <!--[if lte IE 7]>
            <b></b><![endif]--><!-- 兼容不支持伪元素的 ie678 -->
        </div>
    </div>

.container {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: #999;
        }
        .justify {
            text-align: justify;
        }
        .justify i {
            display: inline-block;
            width:24px;
            line-height: 24px;
            border:1px solid #333;
            font-style: normal;
            text-align: center;
        }
        .justify:after{
            content: "";
        }

        .justify:after,.justify b {
            display:inline-block;
            position:relative;
            width:100%;

            z-index:-1;
            *zoom:1;
        }

这篇关于css如何实现兼容性的元素不确定多少的情况下两端对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！