個々の文字をCSSの文字間隔に水平に整列できますか？

Question

CSSのルールがletter-spacing: 16px;の場合、文字が「ボックス」内で左揃えになっていることがわかりました。余分なスペースを追加した場合のように、カーソルが右端に移動します。の後に。

letter-spacingを使用することはできますが、文字を新しい拡張境界内で水平に整列させることはできますか？

Answer 1

これはできません。理由は、これはpadding/marginとなりますが、positionのようにはなりません。しかし、もしそうなら、inline-flexを使って、orderを使って並べ替えることができます。

p {display: inline-flex;} 
 
p span {padding: 3px;} 
 
p span.second {order: 1;}

<p> 
 
    <span class="first">first</span> 
 
    <span class="second">second</span> 
 
    <span class="third">third</span> 
 
</p>

これは単なるPOCです。お気軽にこちらからどうぞ。

Answer 2

前述したように、letter-spacingには、文字をユニットに配置する手段がなく、より正確には実際には「追跡」だけが追加されます。あなたのコメントから

は、あなたが取得したいものを見かけであり、それは、あなたが複数の1文字のものにあなたの入力を分割することができてちょっと達成可能である：

div { 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    float: left; 
 
    clear: both; 
 
} 
 

 
input { 
 
    border: none; 
 
    display: block; 
 
    float: left; 
 
    width: 20px; /* mimics letter-spacing*/ 
 
    text-align: center; 
 
}

<div> 
 
    <input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m"> 
 
    <input name="pin1[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i"> 
 
    <input name="pin1[]" maxlength=1 value="m"> 
 
</div> 
 

 
<div> 
 
    <input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="i"> 
 
    <input name="pin2[]" maxlength=1 oninput="this.nextElementSibling.select()" value="m"> 
 
    <input name="pin2[]" maxlength=1 value="i"> 
 
</div>