Question

我不明白为什么这些不会对齐。这应该是这么简单。我知道我可以用负边距调整按钮，但感觉有点黑客。我想知道造成这个问题的原因。

HTML：

<h2>A simple thing<br/>made difficult!</h2> 
<button>BTN</button>

CSS：

h2 {
    font-size: 29px;
    font-weight: lighter;
    display: inline-block;
    font-family:'Open Sans', sans-serif;
    margin:0;
    margin-right: 42px;
}
button {
    margin:0;
    font-size: 35px;
    padding: 10px 40px;
    width: 200px;
    display: inline-block;
}

JS在这里小提琴：http://jsfiddle.net/15xn79by/

Answer 1

只需使用 vertical-align：top; 按钮

＆＃13;

h2 {
    font-size: 29px;
    font-weight: lighter;
    display: inline-block;
    font-family:'Open Sans', sans-serif;
    margin:0;
    margin-right: 42px;
}
button {
    margin:0;
    font-size: 35px;
    padding: 10px 40px;
    width: 200px;
    display: inline-block;
    vertical-align:top;
}

＆＃13;

<h2>A simple thing<br/>made difficult!</h2>	
<button>BTN</button>

＆＃13;

Answer 2

h2 {
font-size: 29px;
font-weight: lighter;
display: inline-block;
font-family:'Open Sans', sans-serif;
margin:0;
}
button {
margin-left:10;
font-size: 35px;
padding: 10px 40px;
width: 200px;
display: inline-block;
float:right;
}
<h2>A simple thing<button>BTN</button><br/>made difficult!</h2>

无法水平对齐h2和Button

2 个答案: