0
Я хочу отобразить кнопку поиска и текстовое поле в той же строке, но у меня проблема с тем, что кнопка поиска отображается немного ниже из текстового поля. Я прикрепил свой код в фрагменте, пожалуйста, запустите его в полноэкранном режиме. Он будет поможет вам понять мою проблемуcss для кнопки поиска и текстового поля
.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;
\t font-size:13px;
\t 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%;
}
p.s{
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>
\t \t
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->