Javascript 如何在输入框右对齐和文本左对齐的情况下进行半中心对齐_Javascript_Css_Forms_Alignment_Inputbox

Javascript 如何在输入框右对齐和文本左对齐的情况下进行半中心对齐

javascript css forms

Javascript 如何在输入框右对齐和文本左对齐的情况下进行半中心对齐,javascript,css,forms,alignment,inputbox,Javascript,Css,Forms,Alignment,Inputbox,我只是一个初级程序员。我已经学习了javascript和css的基础知识。我正在尝试找出如何获得具有此布局的网页：我可以让h1居中。我在中输入h1以下的所有内容，以便重置按钮可以工作。但我觉得剩下的部分，我不能左右解释，因为我不想让任何一方都明白。我想我应该做一些桌子上的事情，也许（在风格上），但我真的不知道；我确实不知道如何执行它。我不知道我是否应该对主体、表单、输入或其他内容进行样式化。我确实试过： input { text-align:center; float:ri

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

我可以让h1居中。我在

中输入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，以便重置按钮位于输入字段下方：
工作示例：
更新的CSS：
input, button[type="reset"] {
        text-align:center;
        float:right;
        clear:both;
    }

在阅读了如何使用CSS创建HTML表单和样式之后，最好的学习方法是反复尝试。“我不知道，我想有点，等等”不会让你走得更远。桌子阅读说明书并尝试一下。SO上的每个人都很乐意帮忙，但你需要做艰苦的工作。