HTML | CSS删除输入表单之间的空格

Question

1. 如何在html / css

中删除输入表单之间的空格

2. 如何使按钮和文本框在同一条线上（即使它们的大小相同，并在顶部和底部具有相同的对齐方式）？红色按钮显示略低于文本框。

我尝试使用按钮的填充/高度，但它不起作用。 这是我的代码：

input[type="text"], [type="password"]{
	font-family: 'Quicksand';
	width:300px;
	height:35px;
	border:1px solid #87e0e5;
	box-sizing:border-box;
	border-radius:2px;
	padding-left:10px;
	opacity:0.75;
}

input[type="text"], [type="password"], [type="search"]:focus {
	background-color: #FFF;
	opacity: 0.90;
	border: 1px solid #41e1ea;
}

.text_cari {
	font-family: 'Quicksand';
	width:150px;
	border:1px solid #87e0e5;
	box-sizing:border-box;
	border-radius:2px;
	padding: 10px 0px 8px 40px;
	opacity:0.75;
}

.btn_cari {
	font-family: 'Quicksand';
	background:no-repeat url(../img/icons8-Search-20.png) 7px;
	padding-left:20px;
	border:none;
	background-color: #f44336;
    color: white; /*font color*/
	height:35px;
	width:70px;
    text-align: center;
	text-decoration:none;
	cursor:pointer;
}

.btn_cari:hover {
	background-color: #f45f36;
}

<form style="padding-top:200px">
            <input class="text_cari" placeholder="Lokasi pekerjaan" name="cari" type="search" style="background:url(img/icons8-Marker-20.png) no-repeat 7px #FFFFFF">
			<input class="text_cari" placeholder="Masukkan jabatan atau perusahaan" name="cari" type="search" style="background:url(img/icons8-Job%20Seeker-32.png) no-repeat 7px #FFFFFF; width:150px;">
            <input type="submit" class="btn_cari" value="Cari">
        </form>

这就是我想要实现的目标

Answer 1

1. 间隙是空白区域：删除它们之间的空白区域，即：

        

您看到的差距实际上是html中的空白区域。

1. 对齐所有元素：表单元素未对齐，因为 它们的高度不同，需要设置垂直对齐。

只需添加：

form input { vertical-align:middle; height:35px; }

仅供参考，所有文本框实际上都是36px：可编辑的“文本”区域是16px + 18px填充+ 2px边框。您可以将顶部填充更改为例如8像素。我也删除了边界半径，所以一切都完全相邻。

form input { vertical-align:middle; height:35px; }

.text_cari {
	font-family: 'Quicksand';
	width:150px;
	border:1px solid #87e0e5;
	box-sizing:border-box;
	padding: 8px 0px 8px 40px;
	opacity:0.75;
}

   .btn_cari {
	font-family: 'Quicksand';
	background:no-repeat url(../img/icons8-Search-20.png) 7px;
	padding-left:20px;
	border:none;
	background-color: #f44336;
    color: white; /*font color*/
	height:35px;
	width:70px;
    text-align: center;
	text-decoration:none;
	cursor:pointer;
}

.btn_cari:hover {
	background-color: #f45f36;
}

<form>
            <input class="text_cari" placeholder="Lokasi pekerjaan" name="cari" type="search" style="background:url(img/icons8-Marker-20.png) no-repeat 7px #FFFFFF"><input class="text_cari" placeholder="Masukkan jabatan atau perusahaan" name="cari" type="search" style="background:url(img/icons8-Job%20Seeker-32.png) no-repeat 7px #FFFFFF; width:150px;"><input type="submit" class="btn_cari" value="Cari">
        </form>