How to properly align textboxes on a webpage with labels_问答_开发者

How to properly align textboxes on a webpage with labels

开发者 https://www.devze.com 2022-12-29 11:58 出处：网络

this is a CSS / design question. I have three textboxes that i want to be center aligned on a web page. Then i want a label desc开发者_如何学编程ription to the right of each one.

When i use attribute like text:align:centre because the labels are of different length it throws out the aligment of the textboxes [see image link below]

http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk

Is there an easy way of keeping the textboxes aligned and then have the labels off the to the right without changing the textboxes?

Thanks.

basically you have to define a width for your form and float: left input and float: right the label, so the label gets next to your input. The is a trick to center relative possitionet elements in CSS: margin: 0 auto but you have to define a width.

The problem you gonna have is that all your inputs are gonna be next to each other. In order to prevent that you nest your label and input in a element. And clear the floats. I would use a UL LI element and not Paragraphs (like in PW example), because most of the time, your form, is a list of questions.

I have made up an example for you: http://jsfiddle.net/Qs4pk/2/

use the <fieldset> tag in combination with <label>. Step by step explanation.
Then align at will.

In your screenshot, you have text-align:centred each element inside a div. So you are seeing the correct behaviour for your current approach.

Instead you need to centre a div (the encompassing box of your textbox and label elements) and then left-align (which will be the browser default) the internal elements.

To centre a div use:

#content {

width: 700px ; margin-left: auto ; margin-right: auto ; }

http://reisio.com/temp/form2.html

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
body {
    margin: 8px;
    padding: 0;
}
form {
    margin: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
    display: block !important;
    display: inline-block;
    overflow: hidden;
}
li {
    float: left;
    clear: left;
}
label {
    display: block;
    width: 200px;
    height: 19px;
    line-height: 19px;
    position: relative;
    margin: 0 0 5px;
    cursor: pointer;
    text-align: right;
}
input {
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid gray;
    padding: 1px 0;
    height: 15px;
    font: 12px sans-serif;
}
        </style>
    </head>
    <body>
        <form action="">
            <ul>
                <li>
                    <label><input> Beans</label>
                </li>
                <li>
                    <label><input> Cornbread</label>
                </li>
            </ul>
        </form>
    </body>
</html>

You question have also a design aspect. What is the best alignment of labels and input textboxes from the users point of view? I was very surprised some months ago as I found "Web Form Design" at MIX09 (see http://videos.visitmix.com/MIX09/C17F). You will see on examples how to improve user experience if one place labels and input textboxes in other places. This video just changed my mind in this area. You can also look at http://www.lukew.com/presos/ and "Best Practices for Hints and Validation in Web Forms" http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/ which some has close information.