我试图在一个有其他东西的页面内显示一个只有CSS的垂直手风琴。只有手风琴没有正确显示 - 拉斯/最底层的链接打开了预期的文本 - 其他链接没有。但是，当使用仅具有手风琴的不同HTML文档编写时，相同的代码也可以工作。
我有直觉感觉问题出现在CSS中，关于尺寸或定位（绝对/相对） - 但无法找到它。
希望得到一些启示...
我的HTML和CSS如下所示：
HTML：
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="main1(with-accordion).css" media="screen">
</head>
<body>
<div id="header">
We do things to help you
<div id="inner_header">
to your satisfaction ....
</div>
</div>
<div id="nav">
<ul>
<li>
<input type="radio" name="tabs" checked id="tab1">
<label for="tab1">Who are we</label>
<div class="content">
<span>
Contents of tab1 goes here:
Visions etc.
</span>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">What we do</label>
<div class="content">
<span>Contents of tab2 goes here:
Credentials, visions etc.
</span>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Contact us</label>
<div class="content">
<span>
Contents of tab3 goes here:
Contents etc.
</span>
</div>
<form method="post" id="data">
<fieldset > <legend> Data </legend>
<br>
<span class="inputs">
<label>First Name :</label>
<input type="text" name="First_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label>Middle Name :</label>
<input type="text" name="Middle_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label>Last Name :</label>
<input type="text" name="Last_Name" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Address 1 : </label>
<input type="text" name="Address1" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Address 2 :</label>
<input type="text" name="Address2" size="50">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Pincode :</label>
<input type="text" name="pincode" size="20">
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Country :</label>
<select>
<option value="Afghanistan" title="Afghanistan">Afghanistan</option>
<option value="Åland Islands" title="Aland Islands">Aland Islands</option>
<option value="Albania" title="Albania">Albania</option>
<option value="Algeria" title="Algeria">Algeria</option>
<option value="American Samoa" title="American Samoa">American Samoa</option>
<option value="Andorra" title="Andorra">Andorra</option>
<option value="Angola" title="Angola">Angola</option>
<option value="Anguilla"
</select>
</span>
<br>
<br>
<span class="inputs">
<label class="form_label">Email ID :</label>
<input type="email" name="email" size="30">
</span>
<br>
<br>
</fieldset>
</form>
<input class="cancel_button" type="button" name="Cancel" value="Cancel">
<input class="submit_button" type="button" name="Submit" value="Submit">
</li>
</ul>
</div>
<!-- The following code block is the problem area-->
<div id="accordion">
<ul>
<li> <a href="#tab1">Tab1</a></li>
<div id ="tab1" class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
</div>
<li> <a href="#tab2">Tab2</a></li>
<div id ="tab2" class="accordion-content">
Cum eu oporteat voluptatum, mandamus explicari ius eu. Discere
</div>
<li> <a href="#tab3">Tab3</a></li>
<div id ="tab3" class="accordion-content">
No amet nullam detracto usu, vix posse iracundia deterruisset
</div>
<li> <a href="#tab4">Tab4</a></li>
<div id ="tab4" class="accordion-content">
In a professional context it often happens that private or
</div>
</ul>
</div>
<!-- The above code block is the problem area-->
<div id="right_bar">Fixed contents here ... </div>
<div id="footer">Page created by: Sukalyan Ghoshal. Email:sukalayn_g@yahoo.com </div>
</body>
</html>
CSS：
#header {
position: absolute;
left: 0;
top: 0;
padding-top: 0;
height: 200px;
line-height: 250%; /**** This line is used to control spacing between the two lines in the header *****/
white-space: nowrap;
text-align: right;
font-size: 3em;
font-style: italic;
font-weight: bold;
color: navy;
width: 100%;
background: -webkit-linear-gradient (to right, mediumblue, darkturquoise);
background: -o-linear-gradient(to right, mediumblue, darkturquoise);
background: -moz-linear-gradient(to right, mediumblue, darkturquoise);
background: linear-gradient(to right, mediumblue, darkturquoise);
}
#inner_header {
display: block;
margin-top: 0;
line-height: 20%; /**** This line is also used to control spacing between the two lines in the header *****/
}
/*accordion css*/
#accordion {
position: absolute;
left: 0;
top: 200px;
}
#accordion ul {
position: relative;
top: 0;
list-style-type: none;
}
#accordion ul a {
display: block;
}
#accordion div {
display: none;
}
#accordion ul li + div:target {
display: inline-block;
margin-top: 10px;
}
.accordion-content {
width: 200px;
}
/* end of accordion css */
#nav {
position: absolute;
left: 225px;
top: 200px;
eight: 600px;
width: 775px;
border-style: solid;
border-width: 1px;
border-color: green;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block; /******* Display property of the li must be set to inline-block along with that of the labels for showing labels side by side *****/
height: 30px;
}
#nav ul li input[type="radio"] {
display: none;
}
#nav ul li label {
float: left;
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-bottom: -5px;
margin-bottom: -15px;
width: 125px;
height: 2.1em;
text-align: center;
font-size: 1em;
overflow: auto;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: green;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-width: 0;
line-height: 2.1em;
white-space: nowrap; /****** height=line-height with white-space=nowrap makes text inside an element vertically centered ********/
}
#nav div {
display: none;
position: absolute;
top: 56px;
left: 35px;
width: 700px;
height: 543px;
border-style: solid;
border-width: 1px;
border-color: green;
text-align: center;
}
#nav .content span {
vertical-align: middle;
}
/****** The next two block must be like this to the minimum to show a behaviour of tabs and tabbed content showing not to have a seperation between them ******/
#nav input[type="radio"]:checked ~ div {
display: block;
background-color: pink;
z-index: -1; /****The z-index property of the labels and the <div> element showing tab content must be staggered like this *****/
}
#nav input[type="radio"]:checked ~ label {
border-bottom-width: 0;
height: 2.2em; /*** In this particular design em has been used for height of labels for ease of toggling border between tab and content *****/
background-color: pink;
z-index: 2; /****The z-index property of the labels and the <div> element showing tab content must have staggered z-index like this *****/
}
/****** The previous two block must be like this to the minimum to show a behaviour of tabs and tabbed content showing not to have a seperation between them ******/
#data {
position: absolute;
left: 100px;
top: 100px;
width: 500px;
height: 550px;
display: none;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs {
position: relative;
left: 50px;
width: 100px;
}
#nav input[id="tab3"]:checked ~ form { /**** This styling is required for showing the form. Without this the fields in the form do not show up. *****/
display:inline-block;
}
#nav input[id="tab3"]:checked ~ form > fieldset {
position: absolute;
width: 565px;
left: -10px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > label {
display: block;
float: left;
margin: 0;
padding: 3px 13px 0 0;
text-align: right;
width: 140px;
background-color:pink;
border-width: 0;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > input[type="text"] {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > select {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > input[type="email"] {
padding-top: -5px;
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 0 5px #666 inset;
-moz-box-shadow:0 0 5px #666 inset;
box-shadow:0 0 5px #666 inset;
height:25px;
line-height:25px;
width:200px;
text-indent:5px;
}
#nav input[id="tab3"]:checked ~ form > fieldset > .inputs > select {
width: 250px;
}
#nav input[id="tab3"]:not(:checked) ~ .cancel_button {
display: none;
}
#nav input[id="tab3"]:not(:checked) ~ .submit_button {
display: none;
}
#nav input[id="tab3"]:checked ~ .cancel_button {
position: absolute;
width: 100px;
left: 400px;
top: 540px;
height: 30px;
border-radius: 5px;
}
#nav input[id="tab3"]:checked ~ .submit_button {
position: absolute;
width: 100px;
left: 550px;
top: 540px;
height: 30px;
border-radius: 5px;
}
#right_bar {
position: absolute;
top: 200px;
left: 1002px;
height: 600px;
width: 340px;
border-style: solid;
border-color: orange;
}
#footer {
position:absolute;
left: 0;
top: 1200px;
width: 100%;
/*border-style: solid;
border-width: 1px;
border-color: black;*/
font-size: 1.25em;
font-style: italic;
font-weight: bold;
text-align: center;
color: white;
background-color: mediumorchid;
height: 100px; /***** The next three lines together vertically center the writing in the <div> ******/
line-height: 100px; /**** height and line-height must be same with white-space having a value of "nowrap" *****/
white-space: nowrap;
background: -webkit-linear-gradient (mediumorchid, violet);
background: -o-linear-gradient(mediumorchid, violet);
background: -moz-linear-gradient(mediumorchid, violet);
background: linear-gradient(mediumorchid, violet);
}
...抱歉长HTML和CSS ...
答案 0 :(得分：0)
如果您使用相同的ID设置多个书签html永远不会工作，请记住设置好您的代码或者您永远不会发现错误，还要打开许多标签，（我已经关闭了自己），点击JSFiddle链接在下面进行修正。
问题在于这部分代码：
<强> HTML
<div id="accordion">
<ul>
<li> <a href="#tab10">Tab1</a></li>
<div id="tab10" class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
</div>
<li> <a href="#tab20">Tab2</a></li>
<div id="tab20" class="accordion-content">
Cum eu oporteat voluptatum, mandamus explicari ius eu. Discere
</div>
<li> <a href="#tab30">Tab3</a></li>
<div id="tab30" class="accordion-content">
No amet nullam detracto usu, vix posse iracundia deterruisset
</div>
<li> <a href="#tab40">Tab4</a></li>
<div id="tab40" class="accordion-content">
In a professional context it often happens that private or
</div>
</ul>
</div>
http://jsfiddle.net/Lsbeuv59/4/
我设置了带有大字符的标签，以确保在将来的情况下解决问题