如何半居中，输入框右对齐，文本左对齐答案

【问题标题】：How do a semi center, with input boxes right-aligned and text left-aligned如何半居中，输入框右对齐，文本左对齐
【发布时间】：2016-02-27 15:42:57
【问题描述】：

我只是一个初级程序员。我已经学习了 javascript 和 css 的基础知识。我正在尝试找出如何获得具有此布局的网页：

我可以将 h1 居中。我在<form> 中的h1 下方的所有内容，以便重置按钮起作用。但我觉得它的其余部分，我不能左右证明它的合理性，因为我不希望任何一方都清楚。我想我应该做一些桌子的事情（在风格上），但我真的不知道；我肯定不知道如何执行它。我不知道我是否应该对正文、表单、输入或什么进行风格化。
我确实尝试过：

input {
    text-align:center;
    float:right;
    clear:both;
}

但随后输入框的描述性文本未对齐。我的身体现在是这样的：

<body>
<h1>Investment Calculator</h1>
<form action="demo_form.asp" method="get">
<br> Amount invested (principle)
<input type="text" style="text-align: right;" id="amountInvested">
<br> Annual rate
<input type="text" id="annualRate">
<br> Number of years 
<input type="text" id="numberOfYears">
<br> Periods per year 
<input type="text" id="ppy">
<br><button type="button" onclick="doFutureValue()">Compute future value</button>
<input type="text" id="boxput">
<br>
<button type="reset" value="Reset">Reset</button>
</body>

【问题讨论】：

在阅读了如何创建 HTML 表单和使用 CSS 设置样式之后，最好的也是恕我直言的学习方式是反复试验。 “我不知道，我想有点，有点或什么”不会让你更进一步。桌子？阅读规格并尝试一下。 SO 上的每个人都很乐意提供帮助，但需要努力工作的是你。

标签： javascript css forms alignment inputbox

【解决方案1】：

您的 HTML 一开始就有错字，我已修复它（form 上缺少关闭标记），其次我更新了您的 css，以便重置按钮位于输入字段下方：

工作示例：http://plnkr.co/edit/0rQhnqeSv2WnPUUTP046?p=preview

更新的 CSS：

input, button[type="reset"] {
        text-align:center;
        float:right;
        clear:both;
    }

【讨论】：