在我开始之前，您应该知道这里有很多信息。这个是因为我还不能发布 pix，还有两个是为了不浪费彼此的时间。非常感谢我在这篇文章中获得的所有帮助！
所以我正在使用一个无序列表，其中列表元素在大文本中显示为内联。列表本身占据了大约 80% 的页面。
当您单击列表元素时，应该会弹出一个 div 来替换列表元素，解释列表元素的含义，如果您单击 div，则 div 会消失，而列表元素会重新出现。
我遇到的问题是我希望 div 元素完全替换列表元素在无序列表中的放置方式（边距和所有内容）。相反，发生的事情是 div 每次都出现在左侧，而无序列表元素在右侧重新排列。
这是html：
<div id="bottom">
<h1 class="issue_line">So what's the issue in Niagara Falls?</h1>
<ul class="issue_headings">
<li class="issue1">Education</li>
<div class="quarter-box1">
<p>The members of NOAH recognize that <strong>quality education</strong> is
necessary for any community to thrive...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
<li class="issue2">Local Hiring</li>
<div class="quarter-box2">
<p>The need for jobs in Niagara County is overwhelming, and NOAH is working to
create more local jobs through the policy level...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
<li class="issue3">Economic Development</li>
<div class="quarter-box3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et
facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
<li class="issue4">Trasnportation</li>
<div class="quarter-box4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et
facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
</ul>
</div>
这是CSS
#bottom {
position: relative;
width: 100%;
margin: 0 auto;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
}
ul.issue_headings {
width: 1498px;
float: left;
margin-top: 50px;
margin-bottom: 50px;
padding: 0;
list-style-type: none;
display: none;
text-align: center;
}
ul.issue_headings li {
display: inline;
margin-left: 2%;
padding: 0;
font-size: 3em;
color: #9ac0e2;
}
ul.issue_headings li:hover {
color: #FF9933;
}
.quarter-box1 {
float: left;
margin-left: 50px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box2 {
float: left;
margin-left: 100px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box3 {
float: left;
margin-left: 150px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box4 {
float: left;
margin-left: 200px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box1:hover, .quarter-box2:hover,.quarter-box3:hover, .quarter-box4:hover {
border: 3px solid #FF9933;
}
这是 jQuery
$('h1.issue_line').click(function(){
$('h1.issue_line').hide("slow");
$('ul.issue_headings').show("slow");
$('div.quarter-box1,div.quarter-box2,div.quarter-box3,div.quarter-
box4').hide("slow");
});
$('ul.issue_headings li.issue1').click(function(){
$('ul.issue_headings li.issue1,div.quarter-box2,div.quarter-box3,div.quarter-
box4').hide("slow");
$('div.quarter-box1,ul.issue_headings li.issue2,ul.issue_headings
li.issue3,ul.issue_headings li.issue4').show("slow");
});
$('ul.issue_headings li.issue2').click(function(){
$('ul.issue_headings li.issue2,div.quarter-box1,div.quarter-box3,div.quarter-
box4').hide("slow");
$('div.quarter-box2,ul.issue_headings li.issue1,ul.issue_headings
li.issue3,ul.issue_headings li.issue4').show("slow");
});
$('ul.issue_headings li.issue3').click(function(){
$('ul.issue_headings li.issue3,div.quarter-box1,div.quarter-box2,div.quarter-
box4').hide("slow");
$('div.quarter-box3,ul.issue_headings li.issue1,ul.issue_headings
li.issue2,ul.issue_headings li.issue4').show("slow");
});
$('ul.issue_headings li.issue4').click(function(){
$('ul.issue_headings li.issue4,div.quarter-box1,div.quarter-box2,div.quarter-
box3').hide("slow");
$('div.quarter-box4,ul.issue_headings li.issue1,ul.issue_headings
li.issue2,ul.issue_headings li.issue3').show("slow");
});
$('div.quarter-box1').click(function(){
$('div.quarter-box1').hide("slow");
$('ul.issue_headings li.issue1').show("slow");
});
$('div.quarter-box2').click(function(){
$('div.quarter-box2').hide("slow");
$('ul.issue_headings li.issue2').show("slow");
});
$('div.quarter-box3').click(function(){
$('div.quarter-box3').hide("slow");
$('ul.issue_headings li.issue3').show("slow");
});
$('div.quarter-box4').click(function(){
$('div.quarter-box4').hide("slow");
$('ul.issue_headings li.issue4').show("slow");
});
让我知道你在想什么！