纯css实现文本列表的前面的文字两端对齐显示

效果如上面展示,前面的文本两端对齐,通过css去实现,代码如下:

一.办法1:

html:

<div class="item">
    <span class="label">姓名</span>：
    <span class="value">张三</span>
</div>
<div class="item">
    <span class="label">出生年月</span>：
    <span class="value">2019-09</span>
</div>
<div class="item">
    <span class="label">性别</span>：
    <span class="value">女</span>
</div>
<div class="item">
    <span class="label">兴趣班</span>：
    <span class="value">舞蹈</span>
</div>

css:

.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px; }
.item .label {
    display: inline-block;
    height: 100%;
    width: 100px;
    text-align: justify;
    vertical-align: top;
}
.item .label::after {
    display: inline-block;
    width: 100%;
    content: '';
    height: 0;
}
.item .value {
    padding-right: 10px;
}

代码主要在于:前面的类加了样式:text-align: justify;vertical-align: top; 然后再给::after加样式:display: inline-block; width: 100%;content: ''; 就可以实现上面的效果.

二.办法2:

html:

<dl class="box">
    <dt>姓名</dt>：
    <dd>张三</dd>
</dl>
<dl class="box">
    <dt>出生年月</dt>：
    <dd>2019-09</dd>
</dl>
<dl class="box">
    <dt>性别</dt>：
    <dd>女</dd>
</dl>

css:

.box{ height: 32px;
    line-height: 32px;
    margin-bottom: 8px; }
.box dt{display: inline-block;
    height: 100%;
    width: 100px;
    text-align: justify;
    text-align-last: justify;
    vertical-align: top;
    overflow: hidden;}
.box dd{padding-right: 10px;display: inline-block;}

办法2的方法在于,对dt加了样式text-align: justify;vertical-align: top; 除了这个之前还要加一个重要的样式text-align-last: justify; 这样也可以直接实现两端文字的对齐了,这个办法不需要加after伪元素.

以上两种办法实现,我比较喜欢用第一种办法.如果还有其他办法去实现的童鞋可以交流分享一下.

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/631

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！