如何修复CSS框上的按钮

时间：2016-05-06 17:33:55

标签： javascript jquery html css

按钮没有在CSS搜索框中修复。这些按钮应该在搜索框上，但它们没有固定在搜索框上，而是它们从面板上出来了 我尝试过使用z-index但是没有用。

enter image description here 

$('#click').click(function()
{   
    $("#search-box").toggle();     
});
   .panel{
	margin-top:60px;
	margin-left:30px;
	margin-right:30px;
	}
	
	.panel-heading{
	font-size:30px;
	text-align:center;
		
	}
	
	.table-box{
	margin-top:30px;
	}
	
	
   
	 #search-box{
	height: 200px;
    width: 400px;
    background:red;
    display: none;
    font-size: xx-large;

	}
	
 	#seat{
	height: 20px;
    width: 40px;
    background:pink;
	
	}
    
<! doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

<!-- Custom CSS -->
    <link href="custom_css/main.css" rel="stylesheet" type='text/css'>  

	  
<!---Font Awesome--->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	
	<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
	

</head>  
  
<body>


<!--Table-->
<div class="panel panel-primary">
      <div class="panel-heading">Available Trips</p></div>
      <div class="panel-body">
          
  <table class="table table-hover">
    <thead>	 
      <tr>
        <th>Route Name</th>
        <th>Departure Time</th>
        <th>Arrival Time</th>
		<th>Available Seats</th>
		<th>Fare</th>
		<th>Search</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Banglore-Pune</td>
        <td>07:00 PM</td>
        <td>07:00 AM</td>
		<td></td>
		<td>Rs 1200</td>
		<td><button type="submit" class="btn btn-default btn-success btn-block" id="click" value="Show/Hide"><span class="glyphicon glyphicon-off"></span>Search</button>

	   <div id="search-box">
    <table>
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></div></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
  
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td></br>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
</table>

<button type="submit" class="btn btn-default btn-success"><span class="glyphicon glyphicon-off"></span>Book</button>


</div><!--search-box-->
</td>
      </tr>
      <tr>
        <td>Banglore-Pune</td>
        <td>09:00 PM</td>
        <td>07:00 AM</td>
		<td></td>
		<td>Rs 2000</td>
		<td> <button type="submit" class="btn btn-default btn-success btn-block" ><span class="glyphicon glyphicon-off"></span>Search</button></td>

      </tr>
      
    </tbody>
  </table>

</div>
</div>
</div>
<!--Table-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
    	
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

<!--Custome Jquery-->
<script src="custom_js/main.js"></script>


</body>

</html>

1 个答案:

答案 0 :(得分：1)

只需从子表中删除那些毫无意义的</br>和</div>。

＆＃13;
＆＃13; 
$('#click').click(function()
{   
    $("#search-box").toggle();     
});
＆＃13; 
   .panel{
	margin-top:60px;
	margin-left:30px;
	margin-right:30px;
	}
	
	.panel-heading{
	font-size:30px;
	text-align:center;
		
	}
	
	.table-box{
	margin-top:30px;
	}
	
	
   
	 #search-box{
	height: 200px;
    width: 400px;
    background:red;
    display: none;
    font-size: xx-large;

	}
	
 	#seat{
	height: 20px;
    width: 40px;
    background:pink;
	
	}
＆＃13; 
<! doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

<!-- Custom CSS -->
    <link href="custom_css/main.css" rel="stylesheet" type='text/css'>  

	  
<!---Font Awesome--->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	
	<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
	

</head>  
  
<body>


<!--Table-->
<div class="panel panel-primary">
      <div class="panel-heading">Available Trips</p></div>
      <div class="panel-body">
          
  <table class="table table-hover">
    <thead>	 
      <tr>
        <th>Route Name</th>
        <th>Departure Time</th>
        <th>Arrival Time</th>
		<th>Available Seats</th>
		<th>Fare</th>
		<th>Search</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Banglore-Pune</td>
        <td>07:00 PM</td>
        <td>07:00 AM</td>
		<td></td>
		<td>Rs 1200</td>
		<td><button type="submit" class="btn btn-default btn-success btn-block" id="click" value="Show/Hide"><span class="glyphicon glyphicon-off"></span>Search</button>

	   <div id="search-box">
    <table>
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
  
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
  <tr>
    <td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
	<td><button id="seat" style="margin:10px;"></button></td>
    <td><button id="seat" style="margin:10px;"></button></td> 
    <td><button id="seat" style="margin:10px;"></button></td>
  </tr>
</table>

<button type="submit" class="btn btn-default btn-success"><span class="glyphicon glyphicon-off"></span>Book</button>


</div><!--search-box-->
</td>
      </tr>
      <tr>
        <td>Banglore-Pune</td>
        <td>09:00 PM</td>
        <td>07:00 AM</td>
		<td></td>
		<td>Rs 2000</td>
		<td> <button type="submit" class="btn btn-default btn-success btn-block" ><span class="glyphicon glyphicon-off"></span>Search</button></td>

      </tr>
      
    </tbody>
  </table>

</div>
</div>
</div>
<!--Table-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	
    	
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

<!--Custome Jquery-->
<script src="custom_js/main.js"></script>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题