html - 试图让表单的输出显示在与 元素 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 值