半居中，輸入框右對齊，文本左對齊

Question

我只是一個初級程序員。 我已經學習了 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>

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 個解決方案

解決方案1
0 2015-11-25 01:24:17

半居中，輸入框右對齊，文本左對齊

問題描述

1 個解決方案

解決方案1 0 2015-11-25 01:24:17

解決方案1
0 2015-11-25 01:24:17