01月19, 2017

css两端对齐

这阵子因为部门没人,所以被拉去做一个金融项目。

这个项目没有使用react、vue等高大上的东西,因为要兼容IE8。所以就采用了jQuery以及其他的一些js插件。本想使用requirejs的,后来想想代码并不是太复杂,没必要引入模块管理器。

在写项目的过程中,由于很久没写css了,感觉手生的很。遇到下面的一个效果:

开户进度

实现上并不是太难,难的是如何等分。

于是跟css大师志爷请教了一篇,他发了我一个链接:别想多了,只不过是两端对齐而已

依样画葫芦,终于搞定。

<div class="process">
    <label>开户流程:</label>
    <div class="step">
        <div class="item">
            <i>1</i>上传影印件
        </div>
        <div class="item">
            <i>2</i>在线审核
        </div>
        <div class="item">
            <i>3</i>开户成功
        </div>
    </div>
</div>
.process label,
.process .step,
.process .step .item {
    display: inline-block;
    vertical-align: top;
}

.process .step {
    width: 500px;
    height: 24px;
    text-align: justify;
}

.process .step:after {
    content: "";
    display: inline-block;
    position: relative;
    width: 100%;
    height: 1px;
    top: -28px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    background-color: #ccc;
    z-index: -1;
}

.process .step .item {
    background: #fff;
    padding-left: 5px;
}

.process .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: #bbb;
    color: #fff;
    margin-right: 5px;
}

本文链接:www.my-fe.pub/post/css-text-justify.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。