Question

这是我第一次发帖，所以我希望我能做到这一点。

我想设置搜索栏like this one

的样式

问题是，与文本输入相比，提交按钮总是略微偏离。无论我做什么，总有至少1px的偏移量。非常感谢帮助！

我有以下代码：

＆＃13;

.searchfield{
	-webkit-appearance:none;
	border: 3px solid #1a5087;
	border-right: 0px;
	border-radius: 3px;
	height: 30px;
	font-size: 20px;
	margin: 0px;
	margin-top: 0px;
	outline: 0;
	display: inline;
}

.searchbutton{
	-webkit-appearance:none;
	background-color: #ffb800;
	height: 36px;
	border: 3px solid #ffb800;
	width: 40px;
	color: white;	
	margin-left: -25px;
	cursor: pointer;
	outline: 0;
	background-repeat:no-repeat;
	background-position: 2px 2px;
	margin-top: 5px;
	display: inline;
}

＆＃13;

<form action="action.php" method="post">
		<input type="number" name="name" placeholder="placeholder" required class="searchfield">
		<input type="submit" value="search" class="searchbutton">
</form>

＆＃13;

Answer 1

我试图在小提琴中重建同样的东西。看看here

<form class="form-wrapper cf">
    <input type="text" placeholder="Search here..." required>
    <button type="submit">Search</button>
</form>

Answer 2

一些CSS更改应该修复对齐：

将vertical-align: middle;添加到.searchfield和.searchbutton，使其与彼此中间对齐
将padding: 0;添加到.searchfield以删除浏览器默认应用的任何填充
从margin-top: 5px;移除.searchbutton以阻止其被推下

＆＃13;

.searchfield{
	-webkit-appearance:none;
	border: 3px solid #1a5087;
	border-right: 0px;
	border-radius: 3px;
	height: 30px;
	font-size: 20px;
	margin: 0px;
	margin-top: 0px;
	outline: 0;
	display: inline;
	padding: 0;
	vertical-align: middle;
}

.searchbutton{
	-webkit-appearance:none;
	background-color: #ffb800;
	height: 36px;
	border: 3px solid #ffb800;
	width: 40px;
	color: white;	
	margin-left: -25px;
	cursor: pointer;
	outline: 0;
	background-repeat:no-repeat;
	background-position: 2px 2px;
	/*margin-top: 5px;*/
	display: inline;
	vertical-align: middle;
}

＆＃13;

<form action="action.php" method="post">
	<input type="number" name="name" placeholder="placeholder" required class="searchfield">
	<input type="submit" value="search" class="searchbutton">
</form>

＆＃13;

HTML表单提交按钮不是垂直居中的

2 个答案: