给input标签选择器设置vertical-align: top;
或者给button标签设置vertical-align: middle;
浏览器默认给input输入框设置了上下内边距1px,左右内边距2px,记得一定要使用通配符选择器清除默认内外边距
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
margin: 100px auto;
}
/* input和button是行内块元素 */
input {
width: 319px;
height: 36px;
padding-left: 21px;
/* 行内块元素水平对齐 */
/* vertical-align: top; */
/* 清除input外廓线 */
outline: none;
border: 2px solid #cfa75a;
border-right: none;
}
/* 改变placeholder默认样式 */
input::placeholder {
color: #ccc;
font-size: 12px;
}
button {
width: 110px;
height: 40px;
vertical-align: middle;
/* 清除button的默认边框 */
border: none;
background: url(./search.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<input type="text" placeholder="搜一搜" /><button></button>
</div>
</body>
问题解决啦!!!