1. 首页>>前端>>CSS

input与button按钮总是不能对齐的解决方法

  button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部。button的高度包含边框的高度,而文本框text则不包含边框高度。这就导致input高度会比button高两像素。

		/* 方法一:  还是会有2个像素的差距*/
		input.search-input {
		    vertical-align: middle;
			height: 25px;
		}
		button.search-button {
		    vertical-align: middle;
		    height: 25px;
		}

  使用以上方式还是会有两个像素对不齐

对齐

方法二:

		input.search-input {
		    height: 25px;
		}
		button.search-button {
		    box-sizing: content-box;
		    height: 25px;
		    vertical-align: middle;
		}

  在相同高的前提下,给button设置,box-sizing: content-box;vertical-align: middle;就可以直接对齐,

对齐


转载联系作者并注明出处:https://www.focusonseo.cn/cassas/151.html