如何调整表单标签与输入框的间距，实现全部输入框对齐？

你可以通过给货币符号套固定宽度的行内块元素实现统一对齐，修改后的代码如下：

修改后的HTML代码 #

给每个货币符号新增<span class="currency-symbol">包裹，统一控制符号占用宽度：

<main>
    <section class="inputs">
        <label for="usd" class="">
            <span class="currency-symbol">$</span>
            <input type="number" name="usd" id="usd" class="input" placeholder="Dollar">
        </label>
        <label for="euro" class="">
            <span class="currency-symbol">€</span>
            <input type="number" name="euro" id="euro" class="input" placeholder="Euro">
        </label>
        <label for="yen" class="">
            <span class="currency-symbol">¥</span>
            <input type="number" name="yen" id="yen" class="input" placeholder="Yen">
        </label>
        <label for="renminbi" class="">
            <span class="currency-symbol">元</span>
            <input type="number" name="renminbi" id="renminbi" class="input" placeholder="Renminbi">
        </label>
        <label for="won" class="">
            <span class="currency-symbol">₩</span>
            <input type="number" name="won" id="won" class="input" placeholder="Won">
        </label>
    </section>
</main>

新增CSS代码 #

在原有CSS基础上添加如下规则即可：

.currency-symbol {
    display: inline-block;
    /* 可根据实际使用的字体调整到最合适的宽度 */
    width: 12px;
    /* 可选：让符号右对齐，视觉上更整齐 */
    text-align: right;
    /* 可选：调整符号和输入框之间的统一间距 */
    margin-right: 4px;
}

该方案的核心是让所有货币符号占用统一的横向宽度，不受字符本身宽度差异影响，自然就能实现后续输入框的对齐，不会出现负margin带来的元素错位问题，适配性更强。

内容的提问来源于stack exchange，提问作者Vadventra