jQuery Akkordeon mehrere Elemente zum Ausrichten

Question

Hallo bin neu in der jQuery Lib und so weit, sehr cool, ich habe gerade eine Geschwindigkeitsschwelle getroffen. Ich möchte drei Elemente anzeigen. ein < h4> tag a < p> tag ein anderes < h4> tag alle innerhalb einer < ul>. Wenn ich also eine Überschrift öffne, wird eine Liste angezeigt und jede Zeile hat einen Namen, eine Beschreibung und dann den Preis. Wenn ich den Schwimmer weglasse, zeigt er sie untereinander an.

<div id="accordion"> 
<h3><a href="#">BBEEE Toolkit</a></h3> 
<div > 
    <ul> 
    <li><h4>Very Large Generic</h4><p>Revenue greater than 1.5 billion</p><h4>Proposal on request</h4></li> 
    <li><h4>Large Generic</h4><p>Revenue between 650 million and 1.5 billion</p><h4>67,980.00</h4></li> 
    <li><h4>Medium Generic</h4><p>Revenue between 250 million and 650 million</p><h4>45,322.00</h4></li> 
    <li><h4>Small-Medium Generic</h4><p>Revenue between 80 million and 250 million</p><h4>30,591.00</h4></li> 
    <li><h4>Small Generic</h4><p>Revenue between 35 million and 80 million</p><h4>21,031.00</h4></li> 
    <li><h4>QSE</h4><p>Revenue between 5 million and 35 million</p><h4>R14,340.00</h4></li> 
    <li><h4>EME</h4><p>Revenue less than R5 million</p><h4>660.00</h4></li> 
    <li><h4>Existing scorecard</h4><p>Upload an existing scorecard</p><h4>FREE</h4></li> 
    </ul> 
</div> 

und meine CSS sieht wie folgt aus:

#accordion { 
border: 2px solid #eee; 
border-radius: 0px 8px 8px 0px; 
width: 940px; 
height: 502px; 
margin: /*top and bottom */5px /*right and left*/auto; 
} 

#accordion h4 { 
font-size: 16px; 
} 

#accordion p { 
font-size: 16px; 

} 

Was könnte ich tun, um sie auszurichten, wie Name Beschreibung Preis zu suchen, und nicht

Name

Beschreibung

preis

nächste li?

Answer 1

h4 und p Tags sind Blockelemente, so dass sie standardmäßig die volle Breite einnehmen, wodurch das nächste Element unterschritten wird. Sie können display: inline verwenden, damit sie sich anders verhalten.

h4, p { 
    display: inline; 
} 

Aber mehr auf den Punkt sollten Sie nicht h4-Tags verwenden, da sie Überschriften bedeuten. So etwas würde besser funktionieren. <li><span class="name">name</span> description <span class="price">price</span></li>

Answer 2

Ich habe Ihr Code nur diesen link, einen Mann mit professionellem Look