CSS利用伪元素实现两端对齐

 

 

 

 

 

 

1 2 3 4 5 6 7
1 2 3 4 5
1 2 3 4
1 2 3
1 2

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>两端对齐</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui, shrink-to-fit=no">
<style>
* {
    margin: 0;
    padding: 0;
}
.step {
    width: 300px;
    height: 30px;
    margin: 20px auto 0;
    text-align: justify; /* 主要还是因为这个所以两端对齐 */
    /*font-size: 0;*/ /* 原本想去掉 inline-block 元素间的空格，后来发现 IE 有问题 */
}
.step i {
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    font-style: normal;
    line-height: 16px;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    *zoom: 1;
}
.step:after {content: "";}
.step:after,
.step b {
    display: inline-block;
    position: relative;
    top: -25px;
    *top: -9px;
    width: 100%;
    height: 1px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    background-color: #ccc;
    z-index: -1;
    *zoom: 1;
}
</style>
</head>
<body>
<div class="step">
    <i>1</i>
    <i>2</i>
    <i>3</i>
    <i>4</i>
    <i>5</i>
    <i>6</i>
    <i>7</i><!--[if lte IE 7]>
<b></b><![endif]--></div>
<div class="step"><i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i><!--[if lte IE 7]><b></b><![endif]--></div>
<div class="step"><i>1</i>
<i>2</i>
<i>3</i>
<i>4</i><!--[if lte IE 7]><b></b><![endif]--></div>
<div class="step">
    <i>1</i>
    <i>2</i>
    <i>3</i><!--[if lte IE 7]><b></b><![endif]--></div>
<div class="step"><i>1</i> <i>2</i><!--[if lte IE 7]><b></b><![endif]--></div>
</body>
</html>

 

posted @ 2016-07-13 23:45  赵小磊  阅读(584)  评论(0)    收藏  举报
回到头部