如何解决输入框(text)跟搜索按钮(submit)对不齐问题和空白间隙问题:

在模仿百度页面制作搜索框时,我写了如下代码:

	<input type="text" id="kuang">
	<input type="submit" id="baidu_buttom" value="百度一下">

并设置了样式:

#kuang{
			height: 16px;
			width: 480px;
			padding: 12px 48px 12px 16px;
			border:2px solid #c4c7ce;
			font-size: 16px;
			border-radius: 10px 0px 0px 10px;
			color: #222;
			margin-left: 0px;
			vertical-align: top;
		}
#kuang:hover{
			border-color: #A2A7B2;
		}
#kuang:active{
			border-color: #4E6EF2;
			border-radius: 0px 10px 10px 0px;    //失灵,不清楚原因
		}
#baidu_buttom{
			height: 44px;
			width: 106px;
			color: white;
			margin-left: -5px;
			background: #4e6ef2;
			border-radius: 0px 10px 10px 0px;
			font-weight: 400px;
			border: 0px;
			font-size: 17px;
			padding: 0px;
		}
#baidu_buttom:hover{
			background-color: #4662D9;
			cursor: pointer;
		}

出现了以下问题:
屏幕截图 2020-09-29 082308.png
虽然不清楚具体原因是什么?但可以解决:

解决对不齐问题:

注意text的样式:
1.vertical-align:top ;
2.为两个input设置不同的高度。
成功解决:
屏幕截图 2020-09-29 082551.png

解决空白间隙问题

1.text的样式:
设置float:left;
2.submit的样式:
设置margin-left:-4px;
成功解决:
屏幕截图 2020-09-29 084007.png
为了美化,我为text设置了border-right:0px;
submit设置了margin-left:-4px;

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页