基本HTML格式问题身体{ 背景：#eee } #变化无常{ 浮动：左；利润率：10px；填充：10px； } #变数{ 浮动：左；利润率：10px；填充：10px； } 分期偿还贷款计算器年化百分比：到期时间（以月为单位）：资产价格：首付款：_Html

基本HTML格式问题身体{ 背景：#eee } #变化无常{ 浮动：左；利润率：10px；填充：10px； } #变数{ 浮动：左；利润率：10px；填充：10px； } 分期偿还贷款计算器年化百分比：到期时间（以月为单位）：资产价格：首付款：

html

基本HTML格式问题身体{ 背景：#eee } #变化无常{ 浮动：左；利润率：10px；填充：10px； } #变数{ 浮动：左；利润率：10px；填充：10px； } 分期偿还贷款计算器年化百分比：到期时间（以月为单位）：资产价格：首付款：,html,Html,JS文件是不相关的。目前，文本输入直接位于每个h5元素的右侧，描述其中的内容。由于标头的长度不同，因此输入未对齐。我希望输入沿着x轴彼此直接对齐，就像它们在自己的div元素中一样，但是我也希望它们中的每一个都沿着y轴与其对应的标题直接对齐，因此我不能通过将它们从h5父元素中取出并粘贴到div中来实现。如何解决此问题？您可以添加： <!doctype html> <html> <head> <style> body{ background

JS文件是不相关的。目前，文本输入直接位于每个h5元素的右侧，描述其中的内容。由于标头的长度不同，因此输入未对齐。我希望输入沿着x轴彼此直接对齐，就像它们在自己的div元素中一样，但是我也希望它们中的每一个都沿着y轴与其对应的标题直接对齐，因此我不能通过将它们从h5父元素中取出并粘贴到div中来实现。如何解决此问题？

您可以添加：

<!doctype html>
<html>
<head>
<style>
  body{
    background: #eee
  }
 #variableNames {
    float:left;
    margin:10px;
    padding:10px;
 }
 #variables{
    float:left;
    margin:10px;
    padding:10px;
 }
</style>
</head>
<body>
    <h1>Amortized Loan Calculator</h1>
    <div id = "variableNames">
        <h5 id = "Apr">Annualized Percentage Rate:<input type = "text"/></h5> 
        <h5 id = "Ttm">Time To Maturity In Months:<input type = "text"/></h5>
        <h5 id = "Cost">Asset Price:<input type = "text"/></h5>
        <h5 id = "DownPayment">Down Payment:<input type = "text"/></h5>
    </div>






    <script src = "mortgage.js"></script>
</body>
</html>

到你的样式表，我想这会给你你想要的。您还可以通过将选择器更改为：

input{
        float:right;
    }

CSS表格拯救

首先，您需要

label

s而不是

h5

第二，我已经包装了你的文本

span

这是您的新代码：

h5 input{
        float:right;
    }

为什么要使用

？这些不是标题。它们是输入标签。使用

元素，然后根据您的喜好对其进行样式设置。

<h1>Amortized Loan Calculator</h1>
<div id = "variableNames">
    <label id = "Apr"><span>Annualized Percentage Rate:</span><input type = "text"/></label> 
    <label id = "Ttm"><span>Time To Maturity In Months:</span><input type = "text"/></label>
    <label id = "Cost"><span>Asset Price:</span><input type = "text"/></label>
    <label id = "DownPayment"><span>Down Payment:</span><input type = "text"/></label>
</div>

#variableNames {
  display:table;
}
#variableNames > label {
  display:table-row;
}
#variableNames > label > * {
  display:table-cell;
}