是否可以以某種方式對齊 div 中的文本，使其正好位于邊緣？
.name {
margin: 0 0 5px 10px;
font-weight: bold;
font-size: 14px;
}
.row {
margin: 0 0 5px 10px;
width: 500px;
justify-content: space-between;
}<div class="name">Align</div>
<div class="row">
zxcsdz 123
</div>
<div class="row">
qwe 4561
</div>
<div class="row">
asdsq 789
</div>現在在答案中我們得到這樣的
zxcsdz 123
qwe 4561
asdsq 789
但它必須正好沿著邊緣，像這樣
zxcsdz 123
qwe 4561
asdsq 789
uj5u.com熱心網友回復：
你可以做這樣的事情。我會使用除 div 以外的其他東西來將文本放入其中，以便您的 HTML 更具語意。
.name {
margin: 0 0 5px 10px;
font-weight: bold;
font-size: 14px;
}
.row {
width: 100px;
display: flex;
justify-content: space-between;
}<div class="name">Align</div>
<div class="row">
<div>
zxcsdz
</div>
<div>
123
</div>
</div>
<div class="row">
<div>
qwe
</div>
<div>
4561
</div>
</div>
<div class="row">
<div>
asdsq
</div>
<div>
789
</div>
</div>uj5u.com熱心網友回復：
有多種方法可以做到這一點。您可以使用兩個行內元素然后文本對齊來實作它。在我的示例中，我使用 flexbox，然后使用文本對齊。
.name {
margin: 0 0 5px 10px;
font-weight: bold;
font-size: 14px;
}
.row {
margin: 0 0 5px 10px;
display:flex;
}
.row .r1 {
text-align: left;
}
.row .r2 {
text-align: right;
width: 100px;
}<div class="name">Align</div>
<div class="row">
<div class="r1">zxcsdz</div>
<div class="r2">123</div>
</div>
<div class="row">
<div class="r1">zxcsdz</div>
<div class="r2">123</div>
</div>
<div class="row">
<div class="r1">zxcsdz</div>
<div class="r2">123</div>
</div>uj5u.com熱心網友回復：
有很多方法可以做到，但是您不能根據需要將單詞和數字分開，因為每個短語就像代碼中的一個片段，因此除非您將它們分開，否則您無法對它們做太多事情，將每個放在不同的元素中標簽，就像一個 P 標簽，那么你可以使用 flexbox 來幫助你！查看我的代碼以獲得更好的主意
.row {
display: flex;
gap: 20px;
}
.num {
text-align: right;
}<div class="row">
<div class="align">
<p class="word">zxcsdz</p>
<p class="word">qwe</p>
<p class="word">asdsq</p>
</div>
<div class="align">
<p class="num">123</p>
<p class="num">4779</p>
<p class="num">789</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/396346.html