框上

框上

关注
发信
关注(28)粉丝(399)

javascript - 如何修复CSS框上的按钮

这些按钮只是没有固定在CSS搜索框上。这些按钮应位于搜索框上，但并未固定在搜索框上，而是从面板中移出
我曾尝试使用z-index，但没有用。

javascript - 如何修复CSS框上的按钮-LMLPHP



$('#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>

最佳答案

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



$('#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>
    <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>

关于javascript - 如何修复CSS框上的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37078306/

10-08 20:34
Powered by LMLPHP ©2024 框上 0.032887