我有一个输入框，希望美元符号的位置取决于输入

Question

这是HTML和CSS中的代码块

.Container {
position: relative;
}
.Dollarsign {
position: absolute;
font-weight: bold;
font-size: 24px;
color: green;
text-align:center;
}
.Input {
font-weight: bold;
font-size: 48px;
position: relative;
text-align:center;
}

<div class='Container'>
<div class='Input '>
<div class='Dollarsign'>$</div>
20213</div>
</div>

我希望美元符号紧挨着数字，并在数字增加或减少时调整位置。

Answer 1

.BetCalculator__Bet {
width: 100%;
height: 50%;
background: #FFFFFF;
color: #000000;
display: flex;
flex-direction: column;
padding: 10px;
}

.BetCalculator__Input-container {
position: relative;
}

.BetCalculator__Bet-dollarsign {
font-weight: bold;
font-size: 24px;
color: green;
border:solid;
text-align:center;
}

.BetCalculator__Bet-input {
font-weight: bold;
justify-content: center;
font-size: 48px;
display: flex;
position: relative;
align-items: center;
border:solid;
text-align:center;
}

<div class='BetCalculator__Input-container'>
<div class='BetCalculator__Bet-input'>
<div class='BetCalculator__Bet-dollarsign'>$</div>
<div>202143434343</div>
</div>
</div>

Answer 2

您可以使用cssafter以获得更好的体验：

.dollar:after {
content: '$';
padding-left: 5px;
}
.euro:after {
content: '€';
padding-left: 5px;
}

<div>
<h1 class="dollar">1000</h1>
</div>
<div>
<h1 class="euro">1000</h1>
</div>

Answer 3

伪函数也可以完成这项工作：

.Input:before {
content: '$';
font-weight: bold;
font-size: 24px;
color: green;
/* optionnal / eventually */
display:inline-block;
vertical-align: 0.4em;
}
.Input {
font-weight: bold;
font-size: 48px;
position: relative;
text-align: center;
}

<div class='Container'>
<div class='Input '>
20213</div>
</div>

您也可以通过 lang 属性值使用不同的货币。

.Input:before {
content: '$';
font-weight: bold;
font-size: 24px;
color: green;
/* optionnal / eventually */
display: inline-block;
vertical-align: 0.4em;
}
.Input {
font-weight: bold;
font-size: 48px;
position: relative;
text-align: center;
}
[lang="fr"] {
color: blue
}
.Input[lang="fr"]:before {
content: '€';
color: crimson
}

<div class='Container' lang="us">
<div class='Input '>
20213</div>
</div>

<div class='Container'>
<div class='Input ' lang="fr">
3072020</div>
</div>