Question

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

form layout picture

我可以将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>

Answer 1

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

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

更新了CSS：

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

半中心如何，输入框右对齐且文本左对齐

1 个答案: