有什么方法可以防止左侧 table 在悬停在 table 上时与右侧 table 碰撞吗？
.rightdrop {
margin: 0;
padding: 0;
}
.leftdrop {
margin-top: -50px;
margin-right: 61px;
margin-left: -1px;
margin-bottom: -2px;
padding: 0;
float: right;
position: relative;
}
a {
display: block;
border: 1px solid black;
text-decoration-line: none;
text-align: center;
}
a:visited {
color: blue;
}
tr {
border-collapse: collapse;
}
.cell {
display: none;
border: 1px solid black;
}
.cell p {
text-align: center;
}
.submitButton {
text-align: center;
}
input {
margin-left: .5em;
}
.rightdrop a:focus+.cell,
.rightdrop a:hover+.cell,
.leftdrop a:focus+.cell,
.leftdrop a:hover+.cell {
display: block;
}
.cell:focus,
.cell:hover {
display: block;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INTI Reservation System</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table width="300" class="rightdrop">
<tr>
<td>
<a href="#">C1</a>
<div class="cell">
<p><b>Name: </b> </p>
<p><b>Student ID: </b></p>
</div>
</td>
</tr>
<tr>
<td>
<a href="#">C2</a>
<div class="cell">
<p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
<p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
<div class="submitButton">
<input type="submit">
</div>
</div>
</td>
</tr>
</table>
<table width="300" class="leftdrop">
<tr>
<td>
<a href="#">C1</a>
<div class="cell">
<p><b>Name: </b> </p>
<p><b>Student ID: </b></p>
</div>
</td>
</tr>
<tr>
<td>
<a href="#">C2</a>
<div class="cell">
<p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
<p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
<div class="submitButton">
<input type="submit">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>还有当我将浏览器最小化时如何防止表格相互冲突。
最佳答案
我刚刚更改了 .rightdrop 和 .leftdrop CSS 类。
.rightdrop {
float: left;
}
.leftdrop {
float: right;
}
a {
display: block;
border: 1px solid black;
text-decoration-line: none;
text-align: center;
}
a:visited {
color: blue;
}
tr {
border-collapse: collapse;
}
.cell {
display: none;
border: 1px solid black;
}
.cell p {
text-align: center;
}
.submitButton {
text-align: center;
}
input {
margin-left: .5em;
}
.rightdrop a:focus+.cell,
.rightdrop a:hover+.cell,
.leftdrop a:focus+.cell,
.leftdrop a:hover+.cell {
display: block;
}
.cell:focus,
.cell:hover {
display: block;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INTI Reservation System</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table width="300" class="rightdrop">
<tr>
<td>
<a href="#">C1</a>
<div class="cell">
<p><b>Name: </b> </p>
<p><b>Student ID: </b></p>
</div>
</td>
</tr>
<tr>
<td>
<a href="#">C2</a>
<div class="cell">
<p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
<p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
<div class="submitButton">
<input type="submit">
</div>
</div>
</td>
</tr>
</table>
<table width="300" class="leftdrop">
<tr>
<td>
<a href="#">C1</a>
<div class="cell">
<p><b>Name: </b> </p>
<p><b>Student ID: </b></p>
</div>
</td>
</tr>
<tr>
<td>
<a href="#">C2</a>
<div class="cell">
<p><b>Name :</b><input type="text" maxlength="10" placeholder="Enter you name"> </p>
<p><b>Password :</b><input type="password" maxlength="8" placeholder="Enter you password"></p>
<div class="submitButton">
<input type="submit">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>关于html - 如何防止这些表重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45935877/