将文本与可折叠集jquery mobile中的按钮对齐

Question

I am trying to add a button in the header of collapsible list along with text. 我试图在collapsible list的header中添加一个button以及文本。 But I want the button to be placed at rightmost side . 但是我想把按钮放在rightmost side 。 When I am trying to do that, the text and button are not aligned. 当我尝试这样做时，文本和按钮不对齐。

EDIT:The button with value "setting" is not aligned with the text "filtered list" 编辑：值为"setting"的按钮未与文本"filtered list"对齐

See: http://jsfiddle.net/puX9w/ 请参阅： http ： //jsfiddle.net/puX9w/

How can I fix the problem? 我该如何解决这个问题？

Answer 1

Working example: http://jsfiddle.net/Gajotres/kNDf4/ 工作示例： http ： //jsfiddle.net/Gajotres/kNDf4/

HTML : 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: CSS：

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

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

将文本与可折叠集jquery mobile中的按钮对齐

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-05-31 10:51:31

将文本与可折叠集jquery mobile中的按钮对齐

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-05-31 10:51:31

解决方案1
4 已采纳 2013-05-31 10:51:31