我不能'；t在这个Javascript计算器中添加换行符

我试图在“计算”按钮和Javascript计算器的结果之间添加一个换行符-。我对网络编程知之甚少。我得到了stackoverflow社区的帮助来构建这个计算器。这就是结果在网页中显示的方式

这是密码

const bcForm=document.getElementById（'电池计算器'）
bcForm.onsubmit=e=>
{
e、 预防默认值（）
让时间=（数字（bcForm.currunit.value）*bcForm.battcurr.valueAsNumber）
/（编号（bcForm.loadunit.value）*bcForm.loadcurr.valueAsNumber）
设time1=（数字（bcForm.loadunit.value）*bcForm.loadcurr.valueAsNumber）
/（编号（bcForm.currenunit.value）*bcForm.battcurr.valueAsNumber）
增值单位
if（数字（bcForm.loadunit.value）==1）
{
单位=“A”
}
其他的
{
单位=“毫安”
}
让放电率=数量（bcForm.Battype.value）*bcForm.battcurr.value
bcForm.timeResult.value=“1）负载可供电“+时间.固定（2）+”小时”
bcForm.time1Result.value=“2）电池放电率”+time1.toFixed（2）+“C”
bcForm.dischargerate.value=“3）最大建议放电率”+放电率.固定（2）+“+单元+”以获得最佳电池性能
}

#电池计算器字段集、#电池计算器标签、#电池计算器输入、#电池计算器选择、#电池计算器输出、#电池计算器按钮{
边框半径：4px；显示：块！重要；浮动：左！重要；边距：.3em！重要；宽度：自动！重要；边距顶部：1em！重要；}
#电池计算器标签，#电池计算器按钮{清除：两个！重要；宽度：15em！重要；}
#电池计算器标签{线宽：2em！重要；溢出：隐藏！重要；空白：nowrap！重要；字体重量：粗体；}
#电池计算器标签：：在{内容：'....'}之后
#电池计算器按钮{背景颜色：#4CAF50；边框：无；颜色：白色；填充：15px 32px；文本对齐：居中；文本装饰：无；显示：内联块；字体大小：16px；}
#电池计算器按钮：悬停{框阴影：0 12px 16px 0 rgba（0,0,0,0.24），0 17px 50px 0 rgba（0,0,0,0.19）；}
#电池计算器输出{margin:2em 2em.4em 1em！重要；}

负载电流
A.
文科硕士


电池最大容量
啊
马来酸酐


电池类型
镍镉
尼姆
铅酸
锂离子
锂离子聚合物
其他
计算

您的输出仍然具有float属性，您只需在最后一个块中清除它们：

#battery-calculator output {
    margin: 2em 2em .4em 1em !important;
    clear:  both !important; /* add this line */
}

---

输出仍然具有float属性，只需在最后一个块中清除它们：

#battery-calculator output {
    margin: 2em 2em .4em 1em !important;
    clear:  both !important; /* add this line */
}

---

我想如果你把不同的元素分成

s，而不是一直使用

，事情会变得容易得多<代码>s更易于设计

在您的示例中，我认为没有必要将文本放在表单中。你可以这样做：

<form id="battery-calculator">
<fieldset>
    <label>Load current</label>
    <input type="number" name="loadcurr" value="0" min="0" >
    <select name="currunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
        <br/>
    <label>Battery maximum capacity</label>
    <input type="number" name="battcurr"  value="0" min="0" >
    <select name="loadunit">
      <option value="1"    select > Ah </option>
      <option value="1000"        > mAh </option>
    </select>
        <br/>
    <label>Type of battery</label>
    <select name="Battype">
      <option value="1" > NiCd </option>
      <option value="0.5"> NiMH </option>
      <option value="0.2"> Lead Acid </option>
      <option value="1"> Li-ion </option>
      <option value="1"> Li-ion Polymer </option>
      <option value="NA"> Others </option>      
    </select>
    <button type="submit">Calculate</button>
    
  </fieldset>
  <div>
        <output name="timeResult"></output>
  
  </div>
    <output name="time1Result"></output>
  </div>
  <div>
    <output name="dischargerate"></output>
  </div>

</form>

负载电流
A.
文科硕士


电池最大容量
啊
马来酸酐


电池类型
镍镉
尼姆
铅酸
锂离子
锂离子聚合物
其他
计算

我想如果你把不同的元素分成

s，而不是一直使用

，事情会变得容易得多<代码>s更易于设计

在您的示例中，我认为没有必要将文本放在表单中。你可以这样做：

<form id="battery-calculator">
<fieldset>
    <label>Load current</label>
    <input type="number" name="loadcurr" value="0" min="0" >
    <select name="currunit">
      <option value="1"    select > A </option>
      <option value="1000"        > mA </option>
    </select>
        <br/>
    <label>Battery maximum capacity</label>
    <input type="number" name="battcurr"  value="0" min="0" >
    <select name="loadunit">
      <option value="1"    select > Ah </option>
      <option value="1000"        > mAh </option>
    </select>
        <br/>
    <label>Type of battery</label>
    <select name="Battype">
      <option value="1" > NiCd </option>
      <option value="0.5"> NiMH </option>
      <option value="0.2"> Lead Acid </option>
      <option value="1"> Li-ion </option>
      <option value="1"> Li-ion Polymer </option>
      <option value="NA"> Others </option>      
    </select>
    <button type="submit">Calculate</button>
    
  </fieldset>
  <div>
        <output name="timeResult"></output>
  
  </div>
    <output name="time1Result"></output>
  </div>
  <div>
    <output name="dischargerate"></output>
  </div>

</form>

负载电流
A.
文科硕士


电池最大容量
啊
马来酸酐


电池类型
镍镉
尼姆
铅酸
锂离子
锂离子聚合物
其他
计算

您还可以在表单外部显示结果，例如在表单下方的另一个div中。

---

祝你好运

您还可以在表单外部显示结果，例如在表单下方的另一个div中。

---

祝你好运

只需使用css和几行JS即可。我删除了

标记，因为它们实际上并不需要

我还修复了submit按钮下的“额外”填充，并添加了几行JS来更新结果的显示

const bcForm=document.getElementById（'电池计算器'）
bcForm.onsubmit=e=>
{
e、 预防默认值（）
让时间=（数字（bcForm.currunit.value）*bcForm.battcurr.valueAsNumber）
/（编号（bcForm.loadunit.value）*bcForm.loadcurr.valueAsNumber）
设time1=（数字（bcForm.loadunit.value）*bcForm.loadcurr.valueAsNumber）
/（编号（bcForm.currenunit.value）*bcForm.battcurr.valueAsNumber）
增值单位
if（数字（bcForm.loadunit.value）==1）
{
单位=“A”
}
其他的
{
单位=“毫安”
}
让放电率=数量（bcForm.Battype.value）*bcForm.battcurr.value
bcForm.timeResult.value=“1）负载可供电“+时间.固定（2）+”小时”
bcForm.timeResult.style.display=“块”
bcForm.time1Result.value=“2）电池放电率”+time1.toFixed（2）+“C”
bcForm.time1Result.style.display=“块”
bcForm.dischargerate.value=“3）最大建议放电率”+放电率.固定（2）+“+单元+”以获得最佳电池性能
bcForm.dischargerate.style.display=“块”
}

#电池计算器字段集、#电池计算器标签、#电池计算器输入、#电池计算器选择、#电池计算器输出、#电池计算器按钮{
边框半径：4px；显示：bl