CSS: Can't align Button and Input together

Question

In twitter bootstrap documentation, there is an interesting way to append a button right next to the input.

Just an example for illustration:

<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>

In my case I am trying to utilize this concept but the button is slightly bigger (by one pixel) I can't figure out what is causing this.

enter image description here

I have created a fiddle, I hope someone can point me to the right direction.

http://jsfiddle.net/houmie/FkEnm/2/

Gurpreet Singh · Accepted Answer · 2012-12-02 20:23:05Z

1

I guess something else in your CSS causing this issue. You can fix this issue by overwriting your css. Make line-height from 20px to 19px on .btn class:

.btn { line-height: 19px }

Working DEMO

answered Dec 2, 2012 at 20:23

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Houman Over a year ago

I really don't have any custom css here. So I don't understand why this happening. Same problem is in this fiddle, this time the text field is bigger than the button and your trick doesn't help here. :( jsfiddle.net/houmie/GcjkC/2

Houman Over a year ago

weird, could be a Firefox problem. :(

Gurpreet Singh Over a year ago

Had a quick look in Firefox and adding height: 30px seems to fix the issue in both browsers.

Nathan Hornby Over a year ago

@Houman Buttons and input take on inherited styles differently. A button generally needs its own declaration for font-family, font-size etc. So if you have globals set up they won't make it to your buttons.

Collectives™ on Stack Overflow

CSS: Can't align Button and Input together

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related