2013-05-31 2 views
1

Я пытаюсь добавить button в header из collapsible list вместе с текстом. Но я хочу, чтобы кнопка была размещена по адресу rightmost side. Когда я пытаюсь это сделать, текст и кнопка не выравниваются.Выравнивать текст с помощью кнопки в разборном наборе jquery mobile

EDIT: Кнопка со значением "setting" не совпадает с текстом "filtered list"

См: http://jsfiddle.net/puX9w/

Как я могу решить эту проблему?

+0

Какая кнопка поместит .. Пожалуйста, дайте больше объяснений о запросе – Dineshkani

+0

, какая кнопка? кнопка в меню работает и располагается справа? –

+0

@ Dineshkani кнопка со значением "настройка". Он не выровнен с текстом «отфильтрованный список» – dejavu

ответ

4

Рабочий пример: http://jsfiddle.net/Gajotres/kNDf4/

HTML:

<body> 
    <div data-role="page"> 
     <div data-role="collapsible-set" data-theme="b" data-content-theme="d"> 
      <div data-role="collapsible"> 
       <h3 data-position="inline">Filtered list    
        <span style="float:right;" class="button-span"> <input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/> 
        </span> 
       </h3> 
       <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"> 
        <li><a href="#">Adam Kinkaid</a></li> 
        <li><a href="#">Alex Wickerham</a></li> 
        <li><a href="#">Avery Johnson</a></li> 
        <li><a href="#">Bob Cabot</a></li> 
        <li><a href="#">Caleb Booth</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 

CSS:

.button-span { 
    position: absolute; 
    right: 0; 
    margin-top: -7px !important; 
} 

.ui-btn-text { 
    display: block; 
} 
+0

Привет, я удалил текст с кнопки с помощью data-iconpos = «notext», теперь значок не отображается. В чем может быть проблема? http://jsfiddle.net/kNDf4/1/ – dejavu

+1

Исправить http://jsfiddle.net/Gajotres/kNDf4/2/ также вы не убьете вас;) – Gajotres

+1

Большое спасибо. да, конечно, вы заслуживаете много преимуществ для того, чтобы помогать всем в мобильных проблемах jQuery. – dejavu

Смежные вопросы