html - 提交按钮将无法正确排列
问题描述
我的提交按钮比搜索栏高一点。有人可以帮我弄清楚。我试图在按钮顶部留出边距,但没有奏效。感谢您的任何帮助。
.searchTerm {
border: 1px solid rgba(214, 214, 214, 0.6);
border-right: none;
border-radius: 15px 0 0 15px;
color: #c2c2c2;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
height: 34px;
outline: none;
padding: 5px;
text-indent: 12px;
width: 580px;
}
.searchTerm:focus {
color: #222;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
}
.searchButton {
background-color: #ffffff;
border: 1px solid rgba(214, 214, 214, 0.6);
border-left: 0;
border-radius: 0 15px 15px 0;
color: #adadad;
cursor: pointer;
font-size: 25px;
height: 46px;
margin-left:-5px;
text-align: center;
width: 60px;
}
.searchButton:focus {
outline: none;
}
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" class="searchTerm" placeholder="Search The Web">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</form>
解决方案
我用你的代码玩了一下,这里是小提琴: https ://jsfiddle.net/6e5q1v09/
.searchTerm {
display:inline-flex;
border: 1px solid rgba(214, 214, 214, 0.6);
border-right: none;
border-radius: 15px 0 0 15px;
color: #c2c2c2;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
height: 32px;
outline: none;
padding-bottom:11px;
text-indent: 12px;
width: 580px;
}
.searchTerm:focus {
color: #222;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
}
.searchButton {
display:inline-flex;
background-color: #ffffff;
border: 1px solid rgba(214, 214, 214, 0.6);
border-left: 0;
border-radius: 0 15px 15px 0;
color: #adadad;
cursor: pointer;
font-size: 25px;
height: 46px;
margin-left:-5px;
text-align: center;
width: 60px;
}
.searchButton:focus {
outline: none;
}
编辑:我可以看到现在占位符没有正确对齐,你可以在正确的时候使用填充和高度属性。这是更正的新小提琴:https ://jsfiddle.net/6e5q1v09/
推荐阅读
- java - 当同一个类中有一个空的构造函数时,是否会绕过带有 args 的构造函数?
- python - 如何使用具有多行平均值的 fillna()?
- ios - 在 Xcode 12.4 中更新领域对象
- python - 谷歌 colab 连接到 IB
- java - 无法在 Kubernetes 上的 Eureka 注册表上注册微服务
- javascript - 路由器功能 - 'beforeEnter' 从 vuex 获取默认值
- android - Android MongoDB Realm:跳过了 28 帧!应用程序可能在其主线程上做了太多工作
- css - Live sass 编译器未检测到部分 sass 文件的更改
- python - 按列值降序对熊猫数据进行分组
- excel-2007 - Excel 2019 与 Excel 2007:数据验证?