Question

我想在同一行显示搜索按钮和文本框但我有问题，搜索按钮显示在文本框下面。我在代码片段中附上我的代码请全屏运行它会帮助您理解我的问题< / p>

.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%;
}
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>
     
		     
                   </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/

搜索按钮和文本框的CSS

1 个答案: