将字母间距调整为容器大小[重复]

Question

我正在尝试创建以下效果

如何使底部文本的字母间距达到容器的末尾？

HTML

<section class="nav">
    <div class="logo">
        <p id="top">Reagan</p>
        <p id="bottom">Clayton</p>
    </div>
</section>

Answer 1

我可以提供这样的解决方案：

.logo {
  width: 300px;
}

#bottom {
  display: flex;
  justify-content: space-between;
}

#bottom_two {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

#bottom_three {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  color: blue;
}

<section class="nav">
    <div class="logo">
        <p id="top">Reagan</p>
        <p id="bottom"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
        <p id="bottom_two"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
        <p id="bottom_three"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>       
    </div>
</section>

Answer 2

简单的解决方案：只需要使用letter-spacing css 属性即可。

要查看输出，请单击“运行代码 sn-p”按钮。

#logoText{
font-size:45px;
text-transform: uppercase;
margin-bottom:0; 
padding-bottom:0

}
#sologunText{
font-size:20px; 
letter-spacing: 30px;
margin-top:5px; 
padding-top:0
}

<section class="nav">
    <div class="logo">
        <p id="logoText">Logo Text</p>
        <p id="sologunText">Sologun</p>
    </div>
</section>