将标签头水平对齐

Question

我的jqueryMobile应用程序中有一个带有2个面板（列表和地图）的选项卡，一旦运行，这些面板就位于彼此下方，我想水平对齐
  我想像这个例子：http://jsfiddle.net/ezanker/k8jhLzks/  但是一旦我在本地复制，它似乎就无法工作
怎么了？

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    
    
      <div role="main" class="ui-content">


            <div data-role="tabs">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#fragment-1" class="ui-btn-active">list</a></li>
                        <li><a href="#fragment-2">map</a></li>
                    </ul>
                </div>
                <div id="fragment-1">
                    <table id="example" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Titolo</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="fragment-2">
                    <div id="idgoogleMap" style="width:500px; height:500px"></div>
                </div>

            </div>
        </div>