如何在內聯上運行手風琴元素？

我正在建立一個簡單的家庭網頁供我的學校使用。我想使它簡單和乾淨，所以我使用jQuery手風琴盒來包含鏈接。我有手風琴元素工作正常，但他們沒有妥善安置。我希望「教師鏈接」和「圖書館信息」框放在同一行，但我似乎無法使其工作。我無法使用'絕對'定位來運行它們，因爲這會阻止它們在打開網頁時擴展網頁。如何在內聯上運行手風琴元素？

有誰知道如何解決這個問題？

<body style="background-color: #D9F3FD"> 
<div id="bodyWrapper"> 
<p class="style1"><span class="style4" id="PHHS">PHHS</span> Home Screen</p> 
    <div class="accordionWrapper"> 
     <div id="accordionStudents"> 
      <h1>Student Links</h1> 
       <div> 
        <table border-color="white" id="table1"> 
         <tr id="table1Row1"> 
          <td class="table1Row1Data1">Bell Schedule</td> 
          <td class="tableRow1Data1">TeacherEase</td> 
          <td class="tableRow1Data1">Powerschool</td> 
          <td class="tableRow1Data1">Library Information</td> 
         <tr> 
         <tr> 
        <tr> 
         <td>Link</td> 
         <td>Link</td> 
         <td>Link</td> 
         <td>Link</td> 
        </tr> 
       </table> 
      </div> 
    </div> 
</div> 
<br> 
<br> 
<br> 
<div class="accordionWrapper"> 
    <div id="accordionTeachers"> 
     <h1>Teacher Links</h1> 
      <div> 
       <p>Test Teacher Text</p> 
      </div> 
    </div> 
    </div> 
<div class="accordionWrapper"> 
    <div id="accordionLibrary"> 
     <h1>PHHS Library Information</h1> 
      <div> 
       <p>Text Library Text</p> 
      </div> 
    </div> 
     </div> 
<br> 
<br> 
<br> 
    </div>

JSfiddle

來源

2013-12-15 user3103701

因此，要解決的盒子「在同一行」是第一個問題，你可以浮動元素這樣的：

#accordionTeachers{ 
    width: 50%; 
    float: left; 
} 

#accordionLibrary{ 
    width: 50%; 
    float: left; 
}

也在你的html中不需要他們周圍的.accordionWrapper。現在對於第二點

阻止他們延長了網頁

我不知道如果我理解正確。但是，如果你想打開的手風琴來擴展色格（＃D9F3FD），你將不得不調整高度，可能是height: auto;

一般來說，你不應該使用<br> or <br />或空錶行只是爲了創造之間的空間你的元素。使用margin-top and margin-bottom垂直距離。

來源

2013-12-15 10:21:01 BenMann

這解決了我的兩個問題，包括關於網頁擴展的問題。爲了澄清，我的問題是，手風琴應該延長背景的長度，所以下拉菜單不會溢出容器，使框看起來好像它有一個很好的z-索引值（因此重疊其他元素）。我刪除了'
'標籤，並按照您的建議使用了邊距工具，現在我得到了更好的功能。我沒有足夠的聲望來投票，但如果我這樣做，我肯定會。再次感謝！ – user3103701

不客氣，很高興幫助：] – BenMann

如何在內聯上運行手風琴元素？

回答

相關問題