button alignign with input

Question

here is my code :

<div class="input-append">

                        <input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />


                        <input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />

<button class="btn btn-mini">Envoyer</button>
     </div>

here is the result :

how to align the button with the fields please ?

Regards Bussiere

Are you asking how to align them vertically (so they are the same height)? — Landjea, Oct 22 '12 at 13:41
What additional CSS are you using? The HTML in your question - when coupled with Twitter Bootstrap - does not look like your screen shot: http://jsfiddle.net/XTuUc/ — My Head Hurts, Oct 22 '12 at 13:57
possible duplicate of [bootstrap: align input with button](http://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button) — Sirko, Oct 22 '12 at 14:53

score 1 · Accepted Answer · answered Oct 22 '12 at 13:44

1

You could manually set the height to the same value

.input-large,
.btn-mini {
   height: 60px;
}

answered Oct 22 '12 at 13:44

Andy

14,427
3
52
76

I had to put : Thanks – Bussiere Oct 23 '12 at 08:55

score 1 · Answer 2 · answered Oct 22 '12 at 13:48

You will need to set one of the "height" properties on each of them in CSS to get them the same height alignment, if I follow your question properly.

I am not a CSS guru but here is an example that should work :

<style>
.equal_height input, .equal_height button { height: 40px; }
</style>

<div class="input-append equal_height">
     <input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
     <input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
      <button class="btn btn-mini">Envoyer</button>
</div>

Note : that is a horrible naming convention I used, this is just an example to get you started. :) — Landjea, Oct 22 '12 at 13:49

button alignign with input

2 Answers2