试图让表单的输出显示在与 <p> 元素 html 相同的行上

Question

我正在尝试将此表单的某些元素显示在同一行：我希望表单的输出显示在与“总计：$”相同的行-（我仍然希望每lb（在本例中为 $1.00）显示在上面的行中，数字微调器显示在右侧）。我试图将整个东西包装在 <span> 中，我将 CSS 设置为 display:inline 但它没有用（我也尝试了一些其他的东西也没有用）。 这是我的代码选择：
HTML：

 <div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>

CSS：

legend { float: left;
         margin-top: 35px;
         padding-top: 20px;
         margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
            max-width: 30em;
            float: right;
            margin-top: 25px;
            padding-bottom: 5px;
            margin-bottom: 10px;
}

Answer 1

legend { float: left;
        
}
.inline { display: inline; }
.quant { text-align: right;
            max-width: 30em;
            float: right;
          
}
form > * { border:1px solid red; line-height:2em }

<div class="caption">
    <form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
        <legend>$1.00</legend>
        <span class="quant">
           
                <label for="quant">QTY</label>
                <input type="number" min="1" max="5" id="quantity" name="quantity">
           
        </span>
        <span>Total:$<output name="amount" for="quantity"></output></span>
    </form>
</div>

摆脱您的p 标签。尽量不要使用可有可无的容器和类。您的代码将更具可读性。您可以更改form > * 的line-height 值