CODEWITHSUNDEEP
css
Dave Stallberg
Dave Stallberg

Reputation: 1603

input type text not going in the same position?

Here is my jsfiddle http://jsfiddle.net/7LUV4/

As you can see, 

.text {
  width: auto;
  height: 20px;
  outline: none;
   -webkit-box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
-moz-box-shadow:    7px 7px 0px rgba(50, 50, 50, 0);
box-shadow:         7px 7px 0px rgba(50, 50, 50, 0);
  transition: box-shadow 0.2s ease;
  -moz-transition: box-shadow 0.2s ease;
  -webkit-transition: box-shadow 0.1s ease;
  -ms-transition: box-shadow 0.2s ease;
  -o-transition: box-shadow 0.2s ease;
  border: 1px solid #CFCACC;
  border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
margin: 5px 20px;
word-wrap: break-word;

}

That is the code i'm using, It uses :focus for it's transition but the thing is, it's not staying at the same position. it's just floating from right to left, How do I fix this?

If possible, please?

Upvotes: 0

Views: 235

Answers (2)

reggaemahn
reggaemahn

Reputation: 6648

Add this to your css

input.text, label.alt{
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: baseline;
  width: 150px;
}

label.alt{
    text-align: left;
}

FIDDLE

Upvotes: 0

MightyPork
MightyPork

Reputation: 18861

You can give the proper styles to label:

label {
    display: inline-block;
    width: 120px;
    text-align: right;
}

Here you make label display as a inline block element, give it exact width, and make text align to right. Hence, you get the inputs nicely aligned under each other.

Btw, it's not good to style all labels like this. You'd better give some id to the form and use #myForm label as the selector.

See in fiddle

Upvotes: 1

Related Questions