我有一个结构为隐藏表的页面（我只尝试使用div，但它不适合我）..我在SECOND单元格中有链接（让我们称之为A）调用FIRST单元格中的链接（让我们称之为B），它将在同一行内调用SECOND单元格下的div部分（A下的一个段落）。
一切都很顺利，但是当我点击A时，B链接显示正常，但让页面向上移动..当我按下隐藏B的按钮时，页面会移回原来的位置..我搜索了很多关于这个......大多数答案都是关于滚动的..我做的只是为了以防万一（即使我的问题是上下移动而不是左右）..但我仍然有问题..
有什么建议吗？
感谢先进..
更新： 我真的做了很多研究......但似乎没有人面对我面临的问题.. PLus，我试图操纵我的代码两天.. plz不要误判我:(
主表：
.myTable
{
width: 100%;
max-width: 1000px;
float : left;
table-layout: auto;
overflow: hidden;
/*border: 1px solid black; */
}
/*.myTable td {
border-width: 2px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
overflow: hidden;
} */
.myCenter
{
width: 90%;
}
.tLeft
{
width: 150px;
}
.myLeft
{
text-align:left; /* This is only if you want the tab items at the center */
padding: 0;
margin: 0;
vertical-align: bottom; /*
position:relative;
top: 100px;
left: 0; */
visibility: hidden;display: none;
/*left:5px;
border: 3px solid green; */
}
.myLeft:target
{
text-align:left; /* This is only if you want the tab items at the center */
padding: 0;
margin: 0;
vertical-align: bottom;
width: 150px;
display: block;
visibility:visible;
float:left; /* no such thing as float center !!!*/
position:relative;
top: 0px;
left: -43px;
/*left:5px;
/*border: 1px solid green;*/
}
.myLeft > ul.menuLeft
{
list-style-type:none;
display:block; /* Change this to block or inline for non-center alignment */
float: left;
vertical-align: bottom;
/*border: 1px solid red;*/
}
.myLeft > ul.menuLeft > li > a
{
color: #580000; /* #7a7883; /* tabs titles */
text-decoration:none;
display:block;
text-align:center;
border:1px solid grey; /* #3333FF border of the tabs */
margin:2px;
width: 150px; /* Width of the tabs */
font-size:15px;
font-family:"Times New Roman", Times, serif;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-user-select:none;
cursor:hand;
}
.myLeft > ul.menuLeft > li > a:hover
{
color: white;
cursor:hand;
}
.myLeft > ul.menuLeft > li > a:focus
{
color: #f5f9fc;
}
.myLeft > ul.menuLeft > li:target > a
{
cursor:default;
...
}
.myLeft > ul.menuLeft > li:target > div
{
display:block;
}
标签：
.tabs
{
position:relative;
left: 0px;
text-align:left; /* This is only if you want the tab items at the center */
width: 100%;
padding: 0;
margin: 0;
/*border: 1px solid green;*/
}
.tabs ul.menu
{
list-style-type:none;
display:inline; /* Change this to block or inline for non-center alignment */
/* width:570px;
/* min-width:570px;
max-width:800px;
vertical-align: bottom;
/*border: 1px solid red;*/
}
.tabs ul.menu > li
{
display:inline;
float:none; /* no such thing as float center !!!*/
vertical-align: bottom;
/** border: 1px solid yellow;
cursor:hand; */
}
.tabs > ul.menu > li > a
{
color: #580000; /* #7a7883; /* tabs titles */
text-decoration:none;
display:inline-block;
text-align:center;
border:1px solid #f1f3f4; /* #3333FF border of the tabs */
padding:5px 10px 5px 10px;
/*width: 25%;*/ /* Width of the tabs */
font-size:15px;
font-family:"Times New Roman", Times, serif;
border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
-moz-user-select:none;
cursor:hand;
/* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#3333FF));
/* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #3333FF, #fff); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #3333FF, #fff);
/* IE 10 */ background: -ms-linear-gradient(top, #3333FF, #fff); /* Opera 11.10+ */ background: -o-linear-gradient(top, #3333FF, #fff);
}
.tabs ul.menu > li > a:hover
{
color: white;
cursor:hand;
}
.tabs ul.menu li > div
{
display:none;
position:absolute;
width:98%;
/* max-width:700px;
min-height:230px; */
left:0;
margin: 0 15px 0 15px;
text-align:left;
padding:0;
}
/*.tabs ul.menu > li > div > p
{
border:1px solid #f1f3f4;
background-color: #f5f9fc;
width: 99%;
padding:10px;
margin:0;
color: #65636e;
font-size:12px;
font-family:"Times New Roman", Times, serif;
text-decoration: none;
min-height:200px;
} */
.tabs ul.menu > li > a:focus
{
color: #f5f9fc;
}
.tabs ul.menu > li:target > a
{
cursor:default;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#8A0808));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #8A0808, #f1f3f4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #8A0808, #f1f3f4);
/* IE 10 */
background: -ms-linear-gradient(top, #8A0808, #f1f3f4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #8A0808, #f1f3f4);
}
.tabs ul.menu li:target > div
{
display:block;
}
内容：
<!-- content -->
<div class="content" style="height:350px; width:760px; ">
<div class="tabs" style="height:390px;"> <!-- Tabs -->
<ul class="menu">
<li id="item-1"> <!-- item-1 -->
<a href="#left-1">Meetings</a> <!-- #f5f9fc -->
<div style="display:block; border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;">
<h3 class="insideh"> Welcome </h3>
<p class="cl" style="font-size:18px; font-style: italic; padding: 5px 20px 5px 20px; ">
Welcome welcome welcome <br>
Please, enjoy the site and feel free to send us any comments you have.<br><br> Thank you..
</p>
</div> <!-- End of Welcome Div -->
<div style=" border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-1"> <!-- 222 -->
<div class="col" style="width:700px; display:inline; "> <!-- 111 -->
<ul>
<li> <a class="alLink" href="aec2009.php">Meetings 2009</a> </li>
<li> <a class="alLink" href="aec2010.php">Meetings 2010</a> </li>
<li> <a class="alLink" href="aec2011.php">Meetings 2011</a> </li>
<li> <a class="alLink" href="aec2012.php">Meetings 2012</a> </li>
<li> <a class="alLink" href="aec2013.php">Meetings 2013</a> </li>
<li> <a class="alLink" href="">Miscellaneous</a> </li>
</ul>
</div> <!-- /111 -->
</div> <!-- end of Content #1 --> <!-- /222 -->
</li> <!-- end of item-1 -->
<li id="item-2">
<a href="#left-2">Educational Materials</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-2"> <!-- 222 -->
<div class="col" style="width:700px; display:inline;"> <!-- 111 -->
<ul>
<li> <a class="alLink" href="aec2009.php">Our Books</a> </li>
<ul>
<li> <a class="alLink" href="aec2009.php"> Books</a> </li>
<li> <a class="alLink" href="aec2010.php"> Society</a> </li>
<li> <a class="alLink" href="aec2011.php">Guidlines</a> </li>
</ul>
<li> <a class="alLink" href="aec2010.php"> Society</a> </li>
<li> <a class="alLink" href="aec2011.php">Guidlines</a> </li>
</ul>
</div> <!-- /111 -->
</div> <!-- end of Content #2 --> <!-- /222 -->
</li> <!-- end of item-2 -->
<li id="item-3">
<a href="#item-3">Event Calender 2013</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-3"> <!-- 111 -->
<div class="col">
<h3 class="insideh"> Date </h3> <p class="cl" style="font-size:16px;">
Jan 12th, 2013 <br>
Apr 30th, 2013 <br>
Jul 10th, 2013 <br> </p>
</div>
<div class="col">
<h3 class="insideh"> Topics </h3> <p class="cl" style="font-size:16px;">
</p>
</div>
</div> <!-- end of Content #3 --> <!-- /111 -->
</li> <!-- end of item-3 -->
<li id="item-4">
<a href="#item-4">AEC Members</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-4"> <!-- 111 -->
<h3 class="insideh"> Our Speaker Members </h3>
</div> <!-- end of Content #4 --> <!-- /111 -->
</li> <!-- end of item-4 -->
<li id="item-5">
<a href="#item-5">Gallery</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; width: 99%; padding:10px; margin:0; height:310px;" id="#item-5"> <!-- 111 -->
<!--<?php /*include("gal1.html"); */?> -->
</div> <!-- end of Content #5 --> <!-- /111 -->
</li> <!-- end of item-5 -->
</ul>
</div> <!-- end of Tabs -->
</div> <!-- end of content -->
索引：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta name="viewport" content="width=device-width, maximum-scale=2.0" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<link href="css/tables.css" rel="stylesheet" type="text/css" />
<?php include 'counter.php' ?>
<title>The Echo Club</title>
<LINK REL="SHORTCUT ICON" HREF="/imgs/icon.png" />
</head>
<body style= "overflow: scroll;">
<table class = "myTable">
<tr> <!-- first row ****** Header SECTION ****** -->
<?php include("htmls/header.html"); ?>
</tr> <!-- *** End of first row *** -->
<tr> <!-- second row ****** Top NAVIGATION ******-->
<td colspan = '3'> <!-- 2-first column -->
<?php $page = 1; include("htmls/topnav.html"); ?>
</td> <!-- End of 1-first col -->
<!--<td> <!-- 2-second col ->
</td> <!-- End of 1-second col ->
<td> <!-- 2-third col ->
</td> <!-- End of 2-third col -->
</tr> <!-- *** End of second row *** -->
<tr> <!-- third row ****** Search SECTION ******-->
<td> <!-- 3-first column -->
<div class="myLeft" style="height:300px; width: 150px;"><ul class="menuLeft">
<li> </li> </ul> </div>
</td> <!-- End of 3-first col -->
<!--<td> <!-- 3-second col ->
</td> <!-- End of 3-second col -->
<td colspan="2"> <!-- 3-third col -->
<?php include("htmls/search.html"); ?>
</td> <!-- End of 3-third col -->
</tr> <!-- *** End of second row *** -->
<tr> <!-- fourth row ****** Main SECTION ******-->
<td> <!-- 4-first column -->
<?php include("htmls/leftNav.html"); ?>
</td> <!-- End of 4-first col -->
<td class="myCenter"> <!-- 4-second col -->
<?php include("htmls/content.html"); ?>
</td> <!-- End of 4-second col -->
<td> <!-- 4-third col -->
<!-- <iframe style="width:170px; height:300px; margin: 0 1% 0 1%;" frameborder="1" allowfullscreen></iframe> -->
<img src="imgs/myAD.jpg" />
<?php include("htmls/newsLetters.html"); ?>
</td> <!-- End of 4-third col -->
</tr> <!-- *** End of fourth row *** -->
<tr> <!-- fifth row ****** Sociel Network SECTION ******-->
<td> <!-- 5-first column -->
</td> <!-- End of 5-first col -->
<td> <!-- 5-second col -->
<?php include("htmls/social.html"); ?>
</td> <!-- End of 5-second col -->
<td> <!-- 5-third col -->
</td> <!-- End of 5-third col -->
</tr> <!-- *** End of fifth row *** -->
<tr> <!-- sixth row ****** Footer SECTION ******-->
<!--<td> <!-- 6-first column ->
</td> <!-- End of 6-first col -->
<td class="myCenter" colspan = '3'> <!-- 6-second col -->
<?php include("htmls/footer.html"); ?>
</td> <!-- End of 6-second col -->
<!--<td><!-- 6-third col ->
</td> <!-- End of 6-third col -->
</tr> <!-- *** End of sixth row *** -->
</table>
</body>
</html>
答案 0 :(得分：1)
（我尝试过只使用div，但它不适合我）
太糟糕了，我确信谷歌并不善待糟糕或完全错误的HTML语义，因为他们不断尝试了解你的内容（如果你有内容）是关于什么的。换句话说：如果你不打算以正确的方式去做，那就根本不用去做。您绝不应该使用table元素，除非您有表格数据和页面布局 NOT 表格数据。
但我会尝试让你走在正确的道路上。我已经为那些不了解使用分区元素和CSS级别1的基本布局的人创建了一个基本的CSS 1级教程。许多“专业人士”使用CSS级别2等位置，如果你阅读并练习你，那么我不仅会发现它适合你，尽管你会远远超过一些自我指定的专业人士。如果您有问题，请随时问我。说真的，当你坚持以正确的方式做这件事时，你会惊讶地发现你可以做多少。
http://www.jabcreations.com/web/css/nested-divisible-elements
答案 1 :(得分：0)
嗯......经过长时间的聆听，我终于得到了它... 我会把它列为未来的问题..
所有我必须做的，就是将它包含在一个稳定的容器div中。就像这样：
<div style="height:350px; width: 150px; "> <!-- Left Container -->
<div id = "left-1" class="myLeft" style="height:300px;" > <!-- Tabs -->
<ul class="menuLeft" >
<li> <a class="alLink" href="#item-1" >bla bla..</a> </li>
</ul>
</div>
<div id = "left-2" class="myLeft" style="height:300px;" > <!-- Tabs -->
<ul class="menuLeft">
<li> <a class="alLink" href="#item-1">bla bla..</a> </li>
<li> <a class="alLink" href="#item-2">bla bla..</a> </li>
</ul>
</div>
</div>
而不是以下内容：
<div id = "left-1" class="myLeft" style="height:300px;" > <!-- Tabs -->
<ul class="menuLeft" >
<li> <a class="alLink" href="#item-1" >bla bla..</a> </li>
</ul>
</div>
<div id = "left-2" class="myLeft" style="height:300px;" > <!-- Tabs -->
<ul class="menuLeft">
<li> <a class="alLink" href="#item-1">bla bla..</a> </li>
<li> <a class="alLink" href="#item-2">bla bla..</a> </li>
</ul>
</div>
它真的显示了我的新手：s