How do a semi center, with input boxes right-aligned and text left-aligned

Question

I'm just a beginning programmer. I've learned the basics of javascript and css. I'm trying to find out how I can get a webpage with this layout:

表格布局图片

I can center the h1. I everything below the h1 in <form> so that the reset button would work. but I feel like the rest of it, I can't right or left justify it, because I don't want it to be clear to either side. I think I'm supposed to do some sort of table thing maybe (in the style) but I really don't know; I for sure don't know how to execute it. I don't know if I should be stylizing the body, the form, the input or what.
I did try:

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

but then the input boxes got miss-aligned from their descriptive texts. My body currently looks like this:

<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

You have a typo in you HTML to begin with, I have fixed it (missing close tag on form ) and secondly I updated your css so that the reset button is below the input fields:

Working example: http://plnkr.co/edit/0rQhnqeSv2WnPUUTP046?p=preview

Updated CSS:

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

How do a semi center, with input boxes right-aligned and text left-aligned

Question

1 answers

solution1
0 2015-11-25 01:24:17

How do a semi center, with input boxes right-aligned and text left-aligned

Question

1 answers

solution1 0 2015-11-25 01:24:17

solution1
0 2015-11-25 01:24:17