css:

 <style type="text/css">
    #list{width:500px;position:absolute;left:50%;margin-left:-250px;top:10px;}
    ul{width:500px;list-style:none;padding:0;margin:0;}
    li{position:relative;border-bottom: dotted 2px #999;
        padding: 41px 0 5px 0;}
   .another{position:absolute;right:0;bottom:-0.3em;background:#fff;padding-left:10px;}
    .strong{position:absolute;left:0;bottom:-0.3em;background:#fff;padding-right:10px;}
    /* clearfix */
    .menu li:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

</style>

html:

<div id="list">
    <ul class="menu">
        <li id="one"><strong class="strong">1</strong></em><strong class="another">两学一做</strong></li>

        <li id="two"><strong class="strong">2</strong></em><strong class="another">何时开始</strong></li>

        <li id="three"><strong class="strong">3</strong></em><strong class="another">面向人群</strong></li>

        <li id="four"><strong class="strong">4</strong></em><strong class="another">具体要求</strong></li>

        <li id="five"><strong class="strong">5</strong></em><strong class="another">如何开展</strong></li>

        <li id="six"><strong class="strong">6</strong></em><strong class="another">四个服从</strong></li>

        <li id="seven"><strong class="strong">7</strong></em><strong class="another">重点学习党规</strong></li>

        <li id="eight"><strong class="strong">8</strong></em><strong class="another">48字</strong></li>
        <li id="nine"><strong class="strong">9</strong></em><strong class="another">四个坚持</strong></li>

        <li id="ten"><strong class="strong">10</strong></em><strong class="another">五个发展理念</strong></li>

        <li id="eleven"><strong class="strong">11</strong></em><strong class="another">三个表率</strong></li>

        <li id="twenle"><strong class="strong">12</strong></em><strong class="another">五个事关</strong></li>

        <li id="thirting"><strong class="strong">13</strong></em><strong class="another">四讲四有</strong></li>

        <li id="forting"><strong class="strong">14</strong></em><strong class="another">“五位一体”总体布局</strong></li>

        <li id="fifting"><strong class="strong">15</strong></em><strong class="another">“四个全面”战略布局</strong></li>

        <li id="sixting"><strong class="strong">16</strong></em><strong class="another">增强党员的“四个意识”</strong></li>

        <li id="seventing"><strong class="strong">17</strong></em><strong class="another">党员领导干部要自觉做到“四有四人”</strong></li>

        <li id="eighting"><strong class="strong">18</strong></em><strong class="another">社会主义核心价值观</strong></li>

        <li id="nineting"><strong class="strong">19</strong></em><strong class="another">三重一大</strong></li>

        <li id="twenty"><strong class="strong">20</strong></em><strong class="another">三会一课</strong></li>

        <li id="twenty-one"><strong class="strong">21</strong></em><strong class="another">党章有多少章多少条</strong></li>

</div>
移动端调试适配就比较简单了对于书目录。