css3中的字間距問題

css

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

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

html

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

一個(gè)字的字體大小乘以2讓后給letter-spacing

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

<label for="contact">
  <span>聯(lián)系人</span>
  <input type="text" id="contact">
</label>
  
<label for="phoneNumber">
  <span>手機(jī)號(hào)碼</span>
  <input type="phoneNumber">
</label>  

<label for="verifyCode">
  <span>驗(yàn)證碼</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;
}

看了樓上的評(píng)論，嗯，你還可以試試這樣(/滑稽臉)：
html:

<label><span>性</span><span>別</span></label>

css:

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

試下display: inline-block

額，我一般都是“性別”中間插兩個(gè) （全角空白），“有效期”中間的空白部分各插一個(gè) （半角空白），雖然不太優(yōu)雅但是勝在兼容好……

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