Question

<!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>

JS文件无关紧要。目前，文本输入直接位于每个h5元素的右侧，用于描述其中的内容。由于标头长度不同，因此输入未对齐。我希望输入沿着x轴彼此直接对齐，就像它们在它们自己的div元素中一样，但是我也希望它们中的每一个都沿着y轴直接与它对应的标题排列，因此为什么我不能把他们从他们的h5父母那里拿出来并坚持到div中。我怎么能解决这个问题？

Answer 1

您可以添加：

input{
        float:right;
    }

到您的样式表，我认为这可以满足您的要求。你也可以通过将选择器改为：

来使这个特定于h5

h5 input{
        float:right;
    }

Answer 2

CSS表格救援！

首先，您需要label而不是h5 s。
其次，我已将您的文字span s。

这是您的新代码：

<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>

使用此CSS

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

We get this _{^{(click to see a live fiddle)}} :

基本的HTML格式问题

2 个答案: