Question

我有一个包含2行的标题。第一行是ui-grid-solo，第二行是ui-grid-c。但是我在第一行遇到了一些问题。即使按钮使用类ui-btn-inline，它们的行为也不像它们是内联的。我想在左边的第一个按钮，在标题的中间，右边的另一个按钮。似乎我提供了错误的风格或者其他东西。

<div data-role="page" class="ui-responsive-panel" id="main">
    <div data-role="header" data-position="fixed">
        <div class="ui-grid-solo">
            <div class="ui-block-a">
                <input type="button" value="Menu" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" onclick='btn_menupanel();'/>
                <h6 id="begin" class="ui-title" role="heading" aria-level="1">Title</h6>
                <input type="button" value="Info" class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check" onclick='$("#infopanel").panel("open");'/>
            </div>
        </div>

        <div class="ui-grid-c">
            <div class="ui-block-a" style="background-color:red">
                    A
            </div>
            <div class="ui-block-b" style="background-color:yellow">
                    B
            </div>
            <div class="ui-block-c" id="div-current-test" style="background-color:blue">
                    C
            </div>
            <div class="ui-block-d" id="div-status" style="background-color:green">
                    D
            </div>
        </div>

    </div><!-- /header -->
</div>

这里有链接：

http://jsfiddle.net/8jkdz8jf/2/

我正在使用jqm 1.4.5。

Answer 1

  <!-- try this out -->
  <div data-role="page" class="ui-responsive-panel" id="main">
        <div data-role="header" data-position="fixed">
            <div class="ui-grid-solo">
                <div class="ui-block-a">
                    <a href="#" type="button" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete" /> Menu </a>
                    <h6 id="begin" class="ui-title" role="heading" aria-level="1">Title</h6>
                    <a href="#" type="button" value="Info" class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check" /> Info</a>
                </div>
            </div>

            <div class="ui-grid-c">
                <div class="ui-block-a" style="background-color:red">
                        A
                </div>
                <div class="ui-block-b" style="background-color:yellow">
                        B
                </div>
                <div class="ui-block-c" id="div-current-test" style="background-color:blue">
                        C
                </div>
                <div class="ui-block-d" id="div-status" style="background-color:green">
                        D
                </div>
            </div><!-- /grid-b -->

        </div><!-- /header -->
    </div>

按钮是ui-btn-inline但在标题中没有内联行为

1 个答案: