страница с индексом страницы с чистым css

Question

Я пытался сделать следующее с помощью css безрезультатно.

Это ближайший я получил что-то вроде этого.

Как вы видите, я близко, но не сигару. Мне нужны тире (или линии желательно, но не будут придирчивы) не все доходят до номера. Я пробовал их перебирать и использовать переполнение: скрытый, но ничего. А также, это отзывчивый сайт, поэтому он также должен учитывать отзывчивость.

Вот мой код. БЛАГОДАРЯ!! :

HTML

 <div class="col-md-12 allocation"> 
      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">Equities</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">65%</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">Domestic large capitalized firms</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">25%</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">Domestic small capitalized firms</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">15%</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">International developed markets</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">15%</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">International emerging markets</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">10%</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10"><strong>Fixed Income</strong></div> 
       <div class="col-md-2 col-sm-2 col-xs-2"><strong>15%</strong></div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10"><strong>Real Estate</strong></div> 
       <div class="col-md-2 col-sm-2 col-xs-2"><strong>20%</strong></div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">Core</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">12.5%</div> 
      </div> 

      <div class="row"> 
       <div class="col-md-10 col-sm-10 col-xs-10">Timber</div> 
       <div class="col-md-2 col-sm-2 col-xs-2">7.5%</div> 
      </div> 
     </div> 

CSS:

.allocation .row{ 
    margin:15px auto; 
} 
.allocation .row > div.col-md-10.col-sm-10.col-xs-10:after{ 
    content: "--------------------------------------------------- "; 
} 

Answer 1

Если вы хотите достичь this, вы можете проверить код here или здесь:

<div class="col-xs-12"> 
    <div class="row"> 
     <div>Equities</div> 
     <div>65%</div> 
    </div> 

    <div class="row"> 
     <div>Domestic large capitalized firms</div> 
     <div>25%</div> 
    </div> 

    <div class="row"> 
     <div>Domestic small capitalized firms</div> 
     <div>15%</div> 
    </div> 

    <div class="row"> 
     <div>International developed markets</div> 
     <div>15%</div> 
    </div> 

    <div class="row"> 
     <div>International emerging markets</div> 
     <div>10%</div> 
    </div> 

    <div class="row"> 
     <div><strong>Fixed Income</strong></div> 
     <div><strong>15%</strong></div> 
    </div> 

    <div class="row"> 
     <div><strong>Real Estate</strong></div> 
     <div><strong>20%</strong></div> 
    </div> 

    <div class="row"> 
     <div>Core</div> 
     <div>12.5%</div> 
    </div> 

    <div class="row"> 
     <div>Timber</div> 
     <div>7.5%</div> 
    </div> 
</div> 

С помощью этого кода CSS:

.row { 
    border-bottom: 1px dashed black; 
    height: 15px; 
    clear: right; 
    margin-bottom: 16px; 
} 

.row div:first-of-type { 
    float: left; 
    background: #FFF; 
    padding-right: 5px; 

} 

.row div:last-of-type { 
    float: right; 
    margin-top: 1px; 
    background: #FFF; 
    width: 50px; 
    text-align: right; 
} 

Answer 2

Есть несколько решений для этого ... Вот один:

.index-row{ 
 
    border-bottom: 1px dashed; 
 
    height:1.5em; 
 
    clear:both; 
 
} 
 

 
.index-row h2, .index-row span{ 
 
    padding:5px; 
 
    margin:0; 
 
    line-height:1.0em; 
 
    background:white; 
 
} 
 

 
.index-row h2{ 
 
    float:left; 
 
} 
 

 
.index-row span{ 
 
    float:right; 
 
}

<div> 
 
    
 
    <div class="index-row"> 
 
     <h2>titulo indice</h2> 
 
     <span>45</span> 
 
    </div> 
 
    <div class="index-row"> 
 
     <h2>titulo indice</h2> 
 
     <span>45</span> 
 
    </div> 
 
    <div class="index-row"> 
 
     <h2>titulo indice</h2> 
 
     <span>45</span> 
 
    </div> 
 
    
 
    
 
</div>