css 实现单行两端对齐，带冒号

Dear 丶 2022-08-28 03:52 288阅读 0赞

## 示例一 ##

先上效果图

![18179839bd594ef6a67c464177ea38cc.png][]

代码

<div>
        <div class="item-info">
          <span class="item-label">品牌</span>
          <span class="item-value">暇步士</span>
        </div>
        <div class="item-info">
          <span class="item-label">供应商</span>
          <span class="item-value">暇步士有限公司</span>
        </div>
        <div class="item-info">
          <span class="item-label">物料编码</span>
          <span class="item-value">4324323424</span>
        </div>
    </div>
    
    css部分
    
    .item-label {
      width: 60px;
      margin-right: 15px;
      text-align: justify;
      text-align-last: justify;
      display: block;
      float: left;
      color: #999;
      position: relative;
    }
    .item-label::after {
      position: absolute;
      right: -5px;
      content: ":";
    }

## 示例二 ##

1 问题：给单行文字设置  text-align: justify;  样式时  不起作用。

例：<div class="box">两端对齐</div>

<style>  
        .box \{  
            width: 150px;  
            height: 30px;  
            line-height: 30px;  
            margin: 50px auto;  
            background-color: green;  
            color: \#fff;  
            text-align: justify;  
        \}  
    </style>

效果：

![SouthEast][]

2  解决方法：

.box:after \{  
            content: '';  
            width: 100%;  
            display: inline-block;  
        \}

效果：

![SouthEast 1][]

[18179839bd594ef6a67c464177ea38cc.png]: /images/20220828/69f3373218504b69b0f0a69c101f3a54.png
[SouthEast]: /images/20220828/1b75bc6a59ae41e2bea3ee71af820d12.png
[SouthEast 1]: /images/20220828/752710e0048049a28bed9c5687c1ee36.png

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关 css两端对齐(CSS两端对齐在苹果手机中不起作用)

css里面怎样让两行文字两端对齐 .ie \{ text-align: justify; text-align-last: justify; text-justify:

谁践踏了优雅/ 2023年09月26日 13:09/ 0 赞/ 68 阅读

相关 css两行文字两端对齐

效果如下： ![20200325091008688.png][] <!DOCTYPE html> <html> <head> <me

ゞ浴缸里的玫瑰/ 2023年07月18日 06:53/ 0 赞/ 193 阅读

相关 CSS 文字两端对齐

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。预览效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

左手的ㄟ右手/ 2023年06月07日 10:41/ 0 赞/ 18 阅读

相关 CSS两端对齐解决方案

.labod { font-size: 48upx; text-shadow: 0upx 0upx 1upx 693018;

超、凢脫俗/ 2023年01月02日 08:26/ 0 赞/ 205 阅读

相关 css实现内容两端对齐

问题描述：因行边缘出现符号或其它情况导致行边缘出现多余的空白，如何解决内容区域边缘不期望的空白呢？ ![在这里插入图片描述][20201224102447758.p

快来打我*/ 2022年12月30日 05:00/ 0 赞/ 267 阅读

相关 css 实现单行两端对齐，带冒号

示例一先上效果图 ![18179839bd594ef6a67c464177ea38cc.png][] 代码 <div> <div clas

Dear 丶/ 2022年08月28日 03:52/ 0 赞/ 289 阅读

相关 TextView两端对齐

在res文件加下添加attrs.xml文件，用于设置styleable <?xml version="1.0" encoding="utf-8"?> <r

不念不忘少年蓝@/ 2022年06月07日 01:22/ 0 赞/ 348 阅读

相关 CSS :after伪类元素实现文字两端对齐

以前很多人都这么干过：两个字中间使用来隔开达到四个字的宽度，三个字也可以，但是，如果文字中包含有数字、大小写英文字母时，比如 “122账号”“abc密码” 这样的，就不好计算

た入场券/ 2022年03月18日 10:08/ 0 赞/ 747 阅读

相关 CSS 文字两端对齐

<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equ

电玩女神/ 2021年10月23日 16:22/ 0 赞/ 443 阅读

相关 css 文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

你的名字/ 2021年05月12日 11:51/ 0 赞/ 662 阅读