怎样实现文本等分布局

Question

怎样用html实现以下布局

我自己试过把每一个字拆成一个span 但是这个方法我觉得不好,求更好的方法

相关代码

<style>

ul li{
  display: flex;
  width: 100px;
  background: #eee;
  justify-content: space-between;
}

</style>
<ul>

<li>AB</li>
<li>ABC</li>
<li>ABCD</li>

</ul>

Answer 1

英文字一定要用空格拆分开，不然当做一个word是不会隔开来显示的
参考解释:https://www.jb51.net/css/5027...

.justify>span{
    width: 100px;
    height: 20px;
    border: 1px solid red;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    color: #ccc;
    text-align: justify;
}

.justify>span:after{
    content: ' ';
    display: inline-block;
    width: 100%;
}

<div class="justify">
    <span>A B</span>
    <span>A B C</span>
    <span>A B C D</span>
</div>

Answer 2

不知道你用不用vue,如果用vue的话，使用v-for可以实现这一效果

<div class="text_list">
  <div class="str_box">
    <span v-for="(item,index) in 'AB'" :key="index">{{item}}</span>
  </div>
  <div class="str_box">
    <span v-for="(item,index) in 'ABC'" :key="index">{{item}}</span>
  </div>
  <div class="str_box">
    <span v-for="(item,index) in 'ABCD'" :key="index">{{item}}</span>
  </div>
</div>

.text_list {
   width: 500px;
   height: 300px;
   margin: 0 auto;
   font-size: 30px;
   .str_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
 }

Answer 3

AB和ABC都是一个单词，怎么能两边对齐
如果是两个或者多个单词了，可以试试

::after {
    content: "";
    display: inline-block;
    width: 100%;
}

Answer 4

只用html?做的到吗。。关注一下

Answer 5

我记得兼容性不大好...

<p>年龄</p>
<p>年龄年</p>
<p>年龄年龄</p>

p {
    display: block;
    text-align: justify;
    text-align-last: justify;
    width: 100px;
}