css3中的字间距问题

Question

哪位大神开发有经验的传授下，如何做到这种效果的字间距的问题哈，给一个宽度，刚好是4个字的宽度，那么，2个字如何恰当的做到也撑开4个字的间距呢？我尝试用过letter-spacing: 0.5em;但是用这种方式还是有点偏差的，个人觉得这方式可能我用的不对，还有更好的方式么？？

Answer 1

<style>
    .label {
        display: inline-block;
        width: 4em;
        text-align-last: justify;
    }
</style>
    
<div>
    <span class="label">性别</span>
</div>
<div>
    <span class="label">出生日期</span>
</div>

Answer 2

额，我一般都是“性别”中间插两个 （全角空白），“有效期”中间的空白部分各插一个 （半角空白），虽然不太优雅但是胜在兼容好……

Answer 3

看了楼上的评论，嗯，你还可以试试这样(/滑稽脸)：
html:

<label><span>性</span><span>别</span></label>

css:

label {
    display: flex;
    justify-content:space-between
}

Answer 4

css

 .letter-2 {
  margin: 0 6px;
}

 .letter-3 {
  margin-left: 24px;
}

html

<dt>收<span class="letter-2">货</span>人：</dt>

Answer 5

试下display: inline-block

Answer 6

一个字的字体大小乘以2让后给letter-spacing

Answer 7

原答案链接：https://segmentfault.com/q/10...

<label for="contact">
  <span>联系人</span>
  <input type="text" id="contact">
</label>
  
<label for="phoneNumber">
  <span>手机号码</span>
  <input type="phoneNumber">
</label>  

<label for="verifyCode">
  <span>验证码</span>
  <input type="text" id="verfiyCode">
</label> 

label{
  display: block;
  margin: 20px;
}

label > span{
  position: relative;
  width: 96px;
  text-align: justify;
  float: left;
  margin-top: 1em;
  height: 1em;
}

label > span::before{
  content: '＊';
  position: absolute;
  font-size: 24px;
  left: -1em;
  color: orange;
  line-height: 0;
  top: .5em;
}

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

label > input{
  width: 210px;
  padding: 10px 20px;
  margin-left: 20px;
  font-size: 1em;
}