时间戳

首页 > 解决方案 > 不会排队

html - 不会排队

问题描述

我的搜索按钮不会与我的搜索栏对齐。谁能帮我弄清楚原因。我已经尝试了我知道该怎么做的一切。我也问过其他人，似乎没有人可以帮助我。我确信这是一个简单的修复，只是我是新手，根本无法弄清楚。感谢您的任何帮助..

.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>

标签： htmlcss

解决方案

好吧，有两个原因导致您没有达到预期的效果。

  1. 您没有margin-top像搜索字段那样的提交按钮。
  2. 因为 both( 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>

希望这可以帮助你。

干杯!

推荐阅读