不会排队

Question

我的搜索按钮不会与我的搜索栏对齐。谁能帮我找出原因。我已经尝试了一切我知道该怎么做。我也问其他人，似乎没有人可以帮助我。我确信这是一个简单的修复程序，只是即时消息，根本无法解决。感谢您提供的所有帮助。

.tftextinput4 {
background: #ffffff;
border-top: 2px solid #e4e4e4;
border-left: 2px solid #e4e4e4;
border-bottom: 2px solid #e4e4e4;
border-right: 0px solid #e4e4e4;
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
color: #000000;
float: center;  
font-size: 21px;
font-weight: 400;
height: 45px;
margin-top: 40px;
padding: 10px 5px;
text-indent: 10px;
width: 700px;
}
	
.tfbutton4 {
background: white url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png) left center no-repeat;
background-color: #ffffff;
background-position: 10px;
border-top: 2px solid #e4e4e4;
border-left: 0px solid #e4e4e4;
border-bottom: 2px solid #e4e4e4;
border-right: 2px solid #e4e4e4;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
color: #ffffff;
cursor: pointer;	
font-weight: 400;	 
height: 69px;
margin-left: -4px;
text-align: center;
text-decoration: none;
width: 45px; 	
}

.tfbutton4:hover {
background: white url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png) left center no-repeat;
background-color: #ffffff;
background-position: 10px;
border-top: 2px solid #e4e4e4;
border-left: 0px solid #e4e4e4;
border-bottom: 2px solid #e4e4e4;
border-right: 2px solid #e4e4e4;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
color: #ffffff;
cursor: pointer;
font-weight: 400;	 
height: 69px;
margin-left: -4px;
text-align: center;
text-decoration: none;
width: 45px; 	
}
	
.tfclear {
clear:both;
}

<form class="tfnewsearch" action="http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=" method="get">
<input type="text" id="tfq" class="tftextinput4" name="q"  size="21" maxlength="12000" <?php if(isset($_REQUEST['q'])) echo " value='{$_REQUEST['q']}'"?> autocomplete="off" placeholder="Safe Web Search...">
<input type="submit" value="" class="tfbutton4">
</form>
<div class="tfclear"></div>

Answer 1

嗯，有两个原因导致您未达到预期效果。

1. 您没有margin-top的提交按钮，就像搜索字段一样。
2. 因为两个（inputs）都是inline-block类型的display元素。他们需要vertical-align才能成为middle。

这样可以解决您的问题。

摘要：

.tftextinput4 {
  background: #ffffff;
  border-top: 2px solid #e4e4e4;
  border-left: 2px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  border-right: 0px solid #e4e4e4;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  color: #000000;
  /*float: center; REMOVED THIS AS IT's INVALID*/
  font-size: 21px;
  font-weight: 400;
  height: 45px;
  margin-top: 40px;
  padding: 10px 5px;
  text-indent: 10px;
  width: 700px;
  max-width:calc(100% - 57px); /*ADDED THIS so it will never exceed 100%*/
  vertical-align: middle; /*ADDED THIS LINE*/
}

.tfbutton4 {
  background: white url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png) left center no-repeat;
  background-color: #ffffff;
  background-position: 10px;
  border-top: 2px solid #e4e4e4;
  border-left: 0px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  border-right: 2px solid #e4e4e4;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 400;
  height: 69px;
  margin-left: -4px;
  text-align: center;
  text-decoration: none;
  width: 45px;
  margin-top: 40px; /*ADDED THIS LINE*/
  vertical-align: middle; /*ADDED THIS LINE*/
}

.tfbutton4:hover {
  background: white url(https://www.capebretonstartpage.com/2/images/main/searchbutton.png) left center no-repeat;
  background-color: #ffffff;
  background-position: 10px;
  border-top: 2px solid #e4e4e4;
  border-left: 0px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  border-right: 2px solid #e4e4e4;
  border-bottom-right-radius: 50px;
  border-top-right-radius: 50px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 400;
  height: 69px;
  margin-left: -4px;
  text-align: center;
  text-decoration: none;
  width: 45px;
}

.tfclear {
  clear: both;
}

<form class="tfnewsearch" action="http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=" method="get">
  <input type="text" id="tfq" class="tftextinput4" name="q" size="21" maxlength="12000" autocomplete="off" placeholder="Safe Web Search...">
  <input type="submit" value="" class="tfbutton4">
</form>
<div class="tfclear"></div>

希望这对您有所帮助。

干杯！