Question

我试图让这个表单的某些元素显示在同一行：我希望表单的输出与＆＃34显示在同一行; Total：$ ＆＃34; - （我仍然希望每磅的价格（在这个例子中是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代码。尽量不要使用可有可无的容器和类。您的代码更具可读性。您可以更改line-height

的form > *值

尝试将表单的输出显示在与<p>元素html

1 个答案: