Сверстать линии разной длины

#вёрстка #css

Как можно сверстать эти линии разной длины в списке?


    

Ответы

Ответ 1

Пример тут: ( http://jsfiddle.net/L2ya3buj/ ). Не судите строго за SCSS.

    

        

            
                 Код
            
            
                 4607003998708
            
        
    


.counter-list {
    ul {
        li {
            display: block;
            position: relative;
            overflow: hidden;
            &:after {
                content:'';
                display: block;;
                overflow: hidden;
                height: 14px;
                border-bottom: 1px dotted #666
            }
            .key {
                display: block;
                float: left;
                z-index: 2;
                padding-right: 2px;
            }
            .value {
                display: block;
                float: right;
                z-index: 2;
                padding-left: 2px;
            }
        }
    }
}


Ответ 2

На основе вот этой статьи: DOT LEADERS

Разметка:  


    

        Однокомнатный стандарт
        1.500 руб/сут
    
    

        Однокомнатный
        2.000 руб/сут
    
    

        Двухкомнатный стандарт
        4.500 руб/сут
    



Стили:  

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none
}
ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:"____________________"
            "____________________"
            "____________________"
            "____________________"
}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white
}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white
}


Итог  



Ссылка на пример


Ответ 3

Если известно то, что ширины достаточно для того, чтобы вместить строчку целиком,
без переносов, то вполне подойдет вариант с табличкой: http://jsfiddle.net/m6v783Ld/
HTML

    
Such a nice term
    

    
1. 01


CSS
.row {
    display: table;
    width: 100%;
}
.row__term {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}

.row__dots {
    display: table-cell;
    border-bottom: 1px dotted;
}

.row__key {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}


Ответ 4

Есть ещё вот такой вариант на основе этой статьи:



.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.product-item {
  margin-bottom: 5px;
}
.container-stroke {
  position: relative;
  display: inline-block;
  width: 400px;
  overflow: hidden;
}
.element {
  float: left;
  min-width: 50px;
  max-width: 310px;
}
.stretch-element {
  position: absolute;
  overflow: hidden;
}
.table-cell {
  display: table-cell;
  width: 1%;
}
.line {
  height: 14px;
  border-bottom: 2px solid #ccc;
}
.price {
  display: inline-block;
  width: 100px;
}

  

    

      Однокомнатный стандарт
    
    

      

        

          
 
        
      
    
  
  
1.500 руб/сут


  

    

      Однокомнатный
    
    

      

        

          
 
        
      
    
  
  
2.500 руб/сут





На jsfiddle