JQuery аккордеон несколько элементов для выравнивания - PullRequest
Новая
       6

JQuery аккордеон несколько элементов для выравнивания

0 голосов
/ 03 апреля 2012

Привет, я новичок в jQuery lib и пока очень круто, я только что столкнулся со скоростью.Я хотел бы отобразить три элемента.тег

тег другой тег внутри .поэтому, когда я открываю заголовок, он отображает список, и каждая строка будет иметь название, описание, а затем цену.если я опускаю поплавок, он отображает их друг под другом. <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> и мой CSS выглядит следующим образом: #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; } что я могу сделать, чтобы выровнять их, чтобы они выглядели как описание именицена, а не имя описание цена следующий ли ??

Ответы [ 2 ]

2 голосов
/ 03 апреля 2012
Теги

h4 и p являются блочными элементами, поэтому по умолчанию они занимают полную ширину, заставляя следующий элемент идти вниз.Вы можете использовать display: inline, чтобы заставить их действовать по-другому. 

h4, p {
    display: inline;
}

Но более важно, что вы не должны использовать теги h4, поскольку они обозначают заголовки.Нечто подобное будет работать лучше.<li><span class="name">name</span> description <span class="price">price</span></li>

0 голосов
/ 03 января 2013

Я изменил ваш код, просто перейдите по этой ссылке , с профессиональным видом

...