将html按钮保留在div的顶部

Question

The html buttons behave very diferently in firefox and chrome. Take this example http://jsfiddle.net/nuu1bfe2/ .

<div>
    <button>hi</button>
    <button>hi<br/>you, there</button>
</div>

In firefox they are placed in the bottom of the parent but in chrome they are placed in the top. How do I make sure that the buttons are always placed in the top.

Answer 1

Use:

button{
    vertical-align: top;
}

demo

Answer 2

You can use vertical-align: top :

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

top

Align the top of the element and its descendants with the top of the entire line.

 div button { vertical-align: top; } 

 <div> <button>hi</button> <button>hi <br/>yuo, there</button> </div> 

Reference

vertical-align

Answer 3

 <style type="text/css">
     button{
     vertical-align:top;
     }
</style>

Add css in your html.