CSS to align labels and text input fields

Question

I'm having CSS issues. I need to make labels for my text input all the same width, so all the labels and text input boxes line up correctly. I know how to accomplish this, but my css for the checkboxes is messing up the css for the text input labels. For example... when I add the label tag for a text input, it displays a checkbox to the left of the text input label.

Here are several examples of what I want to accomplish:

• CSS to align label and input (this didn't work)

• Justify form elements using CSS (this didn't work)

• This is what it looks like on my site

HTML FORM

    <div id="flexbox">
      <ul>
        <li><label for="spd">SPD</label> <input type="text" name="spd" id="spd" value="<?php echo htmlentities($spd) ?>" /></li>
        <li><label for="str">STR</label> <input type="text" name="str" id="str" value="<?php echo htmlentities($str) ?>" /></li>
        <li><label for="agi">AGI</label> <input type="text" name="agi" id="agi" value="<?php echo htmlentities($agi) ?>" /></li>
        <li><label for="acc">ACC</label> <input type="text" name="acc" id="acc" value="<?php echo htmlentities($acc) ?>" /></li>
        <li><label for="awr">AWR</label> <input type="text" name="awr" id="awr" value="<?php echo htmlentities($awr) ?>" /></li>
      </ul>
    </div>

CSS

    /* -----  Inputs, textareas and selects  ----- */

    input[type="text"], textarea, select, div.styled, input[type="file"] {  
        width:15em;
        border-radius:4px;
        border: solid 1px #ccc;
        padding:0.4em;
    }

    div.styled, select, input[type="submit"], input[type="button"], input[type="reset"],
    input[type="file"]:after {
        background: white url(img/formelements-select.png) no-repeat center right;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }   

    input[type="text"], textarea, input[type="file"] { 
        background-color:#ffffff;
        -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
        box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
    }

    .ie9 input[type="text"] { line-height:normal; } /* Get the stuff to line up right */

    textarea { width:100%; height:10em; }


    /* -----  Checkboxes and Radio inputs  -----  */    

    input[type="radio"], 
    input[type="checkbox"] { position: absolute; left: -999em; }

    label:before { 
        display: inline-block;
        position: relative;
        top:0.25em;
        left:-2px; 
        content:'';
        width:25px;
        height:25px;
        background-image:url(img/formelements.png);
    }

    input[type="checkbox"] + label:before { background-position: 0 -25px; }
    input[type="checkbox"]:checked + label:before { background-position: 0 0 ; }

    input[type="radio"] + label:before { background-position: -25px -25px; }        
    input[type="radio"]:checked + label:before { background-position: -25px 0; }

    /* Remove the custom styling for IE 7-8 */

    .ie8 label:before { display:none; content:none; }

    .ie8 input[type="checkbox"],
    .ie8 input[type="radio"],
    .ie7 input[type="checkbox"],
    .ie7 input[type="radio"]{
        position: static; left:0; }

    .ie8 input[type="checkbox"],
    .ie8 input[type="radio"] { 
        position:relative; top:5px; margin-right:0.5em; }   

    input[type="text"]:focus, textarea:focus {
        border-color:#000; }

Answer 1

If your only goal is to make the labels all the same width, couldn't you add something like this to the top of your css?

li label, li input {
  display: inline-block;
}
li label {
  min-width: 80px;
}

Before:

After:

... or did I miss something?

Answer 2

If you want to be more specific for this form in your css file you can do:

#flexbox label{
    display:inline-block; 
    width:40px;
}

This is slightly more efficient if you just want to align every label in the form. You just need to ensure you specify a width longer than your longest entry. You only asked about the labels but given your inputs are all numbers you probably will want input as well as label there and to get rid of the ul marker dots. i.e.

#flexbox {
    width:120px;
}

#flexbox>ul *{
    display:inline-block; 
    width:40px;
    text-align: center;
}

#flexbox li{
    width:120px;
}

(I have a little extra style info there, I just used a page I had open to get an image for demonstration)