css - 边框制作按钮按下一半输入

Question

http://jsfiddle.net/Xnbf4/

启用边框框时，我的按钮被按下输入的一半。从输入中删除填充“修复”它但显然不是真正的修复......

按钮和输入应该是内联的(而不是按钮上方的间隙)。

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.input {
display: inline-block;
margin: 5px;
border: 2px solid $web-lines;
padding: 15px;
height: 18px;
}

.input-search {
padding: 15px 25px;
}

.button { /*Default button */
display: inline-block;
position: relative;
margin: 5px;
border: 0;
border-bottom: 3px solid $web-green-darker;
padding: 7px 15px 5px 15px;
color: #fff;
font-weight: 600;
background: #4d913e;
}

Answer 1

你只需要添加vertical-align: middle: http://jsfiddle.net/Xnbf4/6/

.button, .input {
    vertical-align: middle;
}

垂直对齐适用于任何 inline 元素，包括 inline-block。我不确定初始属性设置为什么(它似乎没有)，但不设置它似乎会导致问题。如果有人有更多信息，希望他们能插话。