0

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;
}
4

1 回答 1

1

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

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

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

于 2013-08-02T14:49:57.750 回答