CSS的搜索按钮和文本框

Question

我想在同一行中显示搜索按钮和文本框，但是我有一个问题，即搜索按钮在文本框的下方略微显示。我在代码段中插入了我的代码，请全屏运行它，它将帮助您了解我的问题

 .outer { margin-left: 20%; margin-top: 1%; margin-bottom: 3%; height: 737px; width: 60%; box-shadow: 10px 10px 5px #888888; border: 1px solid #f9f2f2; border-radius: 10px; } button.logout{ display:inline; float:right; margin-right:10px; margin-left: 5px; } .lout{ float: right; display: inline-block; margin-top:20px; } .log { width:60%; height: 10%; position:absolute; border: 1px solid #f9f2f2; border-radius: 10px; background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(top, #e5e3e3, ffffff); background-color: #e5e3e3; border: 0px solid #f9f2f2; text-align: center; line-height:20px; border-width: 0px 0px 1px 1px; display:inline-block; } .rest { padding:7%; height: 580px; background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(top, #e5e3e3, ffffff); background-color: #e5e3e3; border: 1px solid #f9f2f2; border-width: 0px 0px 0px 0px; border-radius: 0px 0px 10px 10px; padding: 10% 7px; } .sidemenu { float: left; margin-top: 140px; width: 100%; } .content { } .side{ width: 24%; float: left; display: inline-block; } form[name=profile] p { padding-left: 20%; } hr { margin: 0; width: 1px; height: 658px; border: 0; background: #fff; float: left; } .astext { background:none; border:none; margin:0; padding:0; cursor:pointer; color:#000000; line-height:35px; font-family:arial; font-size:13px; font-weight:bold; } a.astext:link,a.astext:visited { color:black; background-color:transparent; text-decoration:none; } a.astext:hover,a.astext:active { color:black; background-color:transparent; text-decoration:none; } .menu{ height: 45px; text-align:left; margin-left:2px; background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(top, #e5e3e3, ffffff); background-color: #e5e3e3; border: 1px solid #f9f2f2; border-width: 0px 0px 0px 0px; border-radius: 0px 0px 10px 10px; text-align: left; padding: 0px 7px; } .menu:hover{ background: -o-linear-gradient(top, #e5e3e3 5%, #ffffff 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff)); background: -moz-linear-gradient(center bottom, #e5e3e3 5%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff"); background: -o-linear-gradient(bottom, #e5e3e3, ffffff); background-color: #e5e3e3; border: 1px solid #f9f2f2; border-width: 0px 0px 0px 0px; border-radius: 0px 0px 10px 10px; text-align: left; padding: 0px 7px; } input[type=text],textarea{ float:right; margin-right:20%; } .search{ display:inline; float:right; margin-right:5px; margin-bottom:5px; } .add{ display:inline; float:right; margin-top:5px; margin-right:4px; margin-left: 5px; } input[type='text'] { display: inline-block; float: left; margin-left:29%; } ps{ margin-left: 350px; } .sxt{ float: right; } h3{ text-align:center; } h1{ float:left; margin-left: 28%; } 

  <div class="outer"> <div class="log"> <!--<h1>Profile</h1> --> <form method="post" class="lout" ><button class="logout" name="logout" >Logout</button> </div> <!--End of log div --> <div class="rest"> <div class="side"> <div class="sidemenu"> <div class="1 menu"> <a href="admin_dashboard.php" class="astext">Profile</a> </div> <!--End of menu1 --> <div class="2 menu"> <a href="clients.php" class="astext">Clients</a> </div> <!--End of menu 2--> <div class="3 menu"> <a href="employees.php" class="astext">Employees</a> </div> <!--End of menu 3--> <div class="menu 4"> <a href="admin_file_view.php" class="astext">Documents</a> </div> <!--End of menu 4--> </div> <!--End of side menu --> </div> <!--End of side div --> <hr> <!-- <div class="heading" > <h1>Profile</h1> </div> End of heading div --> <div class="content"> <form method="post" name="profile" id="profile"> <h1>Clients List</h1><a href="client_new.php"><button name="add" style="align:right;" class="add">Add</button></a> <br><br><br> <p style="align:right;" class="s"> <input class="stxt" type="text" size=20 name="searchtxt"> <button name="search" class="search">Search</button></p> </div> <!--End of content --> </div> <!--End of rest div --> </div> <!--End of outer div--> 

Answer 1

在您的CSS中更改以下代码：

input[type='text'] {
  display: inline-block;
  float: left;
  margin-right: 0;
  /* margin-left: 29%; remove this line*/ 
}
p.s {
  margin-left: 50px;
  width: 280px;
}
.search {
  display: inline-block;
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}

这是小提琴： http : //jsfiddle.net/ub8888sd/1/

甚至将<p class="s"></p>更改为div：

<div class="s"></div>

并在CSS中：

div.s {
      margin:0 auto;
      width: 215px;
    }

http://jsfiddle.net/ub8888sd/5/