HTML |（即讓他們輸入表單

Question

1. 我如何在HTML/CSS刪除輸入表單之間的空隙

2. 我怎樣才能使按鈕和文本框是在同一行之間的CSS刪除空格相同的大小和頂部&底部有相同的對齊）？紅色按鈕顯示比文本框略低。

我試着玩按鈕的填充/高度，但它不工作。 這裏是我的代碼：

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

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

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

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

 
.btn_cari:hover { 
 
\t 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"> 
 
\t \t \t <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中的空白。

對齊所有元素：表單元件彼此不對準，因爲 它們是不同的高度與垂直取向性需要被設置。

只需補充一點：

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

僅供參考，所有的文本框實際上36px：可編輯的 「文本」 區域爲16像素+ 18像素填充+ 2px的邊框。您可以將頂部填充更改爲8像素。我也刪除邊界半徑，所以一切都完美地相連。

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

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

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

 
.btn_cari:hover { 
 
\t 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>